流动和固定列表格

Question

我在布局中有一个表格，其中有5列，其中3列应该是固定的像素宽度，另外2列应该是流式的。

一开始听起来很简单，但问题是这两个流动的列应该有不同的行为。

最后一列应尽可能地拉伸以适应其内容，以便永远不会被隐藏，但不应留下空白。中间列应占用所有可以找到的空闲空间，但如果最后一列需要增大，则也应溢出隐藏。

我试图用CSS来实现这个目标，但无法做到...是否有纯CSS的方法还是需要JS？

编辑

这就是我到目前为止得到的：

HTML

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="fixed">fixed</td>
        <td class="fluid hidden">fluid</td>
        <td class="fixed">fixed</td>
        <td class="fluid visible">this content should always be visible</td>
    </tr>    
</table>

CSS

->

CSS

table{
   width: 100%;
   table-layout: fixed;
}

td{
    padding: 10px;  
    white-space: nowrap;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{

}

.hidden{
    overflow:hidden;
}

http://jsfiddle.net/KzVbX/

它的工作几乎如预期一样，除了最后一列。

- arvere

---

请添加代码/jsFiddle。 - Andrew Johnson

这是实际的表格数据吗？换句话说，它必须是“table”吗？ - Chris Rockwell

@ChrisRockwell 确实是表格数据。 - arvere

@AndrewDonaldJohnson 我真的没有太多可以展示的... 到目前为止，我只有一个普通的表格标记 :/ - arvere

提供可复制/粘贴的标记可以更快地获得答案。打出一个包含5列表格所需的所有标记是相当费力的。 - cimmanon

太好了，一个CSS问题，他们真正解释了他们想要什么！你赢了。 - Daniel Moses

Answer 1

也许我能帮忙，也可能不能。

首先，我会使用div代替tr/td。自从CSS出现后，我就没有使用表格的需求了，我很惊讶还有些人在使用。但是可能有原因，所以请不要将其视为批评。

如果你使用div，那么请编辑你代码中的这一部分：

.visible {
  overflow:visible;
  min-width: 210px;
}

这将确保无论如何div至少有210个像素宽。应该有效。 顺便说一下，如果这是页面上唯一的表格，并且该div或td在具有最小高度的意义上是唯一的，则可能希望使用id而不是类。这将使您的代码更加简洁优雅。 希望这能帮到您。

- Ricardo Parker

---

适用于我。谢谢！ - Giorgio

请记住，<table>标签在可访问性和SEO方面具有自动优势。所有浏览器、机器人和屏幕阅读器都能理解一个正确的表格。如果您用自己制作的通用div替换经典表格，则还必须提供与aria-roles、标签、标题、tabindex等相关的标记，即使这样，您仍然可能会错过一些东西。 - Kalnode

Answer 2

尝试这个，看看是否接近你要寻找的内容：

演示 - http://jsfiddle.net/WGpB3/

<table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
            <td style="width:60px;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:hidden;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:visible;">&nbsp;</td>
    </tr>

- Andrew Johnson

Answer 3

如果您不需要包装，请执行以下操作：

td{
    padding: 10px;  
}

如果需要换行，您需要将表格的宽度更改为自动并添加min-width参数。

table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}

- Vladimir Kocjancic

Answer 4

Made changes to CSS file *DEMO - http://jsfiddle.net/KzVbX/2/

table{
   width: 100%;
    table-layout:fixed;
}

td{
    padding: 10px;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{
  overflow:visible;
}

.hidden{
    overflow:hidden;
    max-width:20%;
    white-space:nowrap;
}

- Andrew Johnson

---

仍然，中间的列在溢出时不会隐藏...尝试调整大小并查看。 - arvere

暂时还不行。最后一列还有剩余的空间...但感谢您的帮助，如果没有人提出解决方法，现在我们所得到的将不得不这样做 :D - arvere