CSS如何使一列在表格中占据尽可能多的空间，而其他列则尽可能少？

Question

我需要用CSS布局HTML数据表格。

表格的实际内容可能有所不同，但始终存在一个主列和2个或更多其他列。我想让主列尽可能地占据宽度，而不管其内容，而其他列尽可能地占据较小的宽度。我无法为任何列指定精确宽度，因为它们的内容可能会发生变化。

如何使用简单的语义有效的HTML表格和仅使用CSS来实现这一点?

例如:

| 主列                                 | 列2   | 列3     |
 <------------------ 固定像素宽度 ------------------->
 <------- 尽可能宽 --------->
 根据内容尽可能窄: <-----> <--------> 

- EvilPuppetMaster

---

哦，而且还要以跨浏览器兼容的方式实现。而且不要用 JavaScript :-) - EvilPuppetMaster

Answer 1

与Alexk的解决方案类似，但根据您的情况可能更容易实现：

与 Alexk 的解决方案类似，但根据您的情况可能更容易实现：

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

如果您想避免换行，还可以将white-space:nowrap应用于单元格。

- Dan

Answer 2

我并不是CSS专家，但是这个方法适用于我（在IE、FF、Safari和Chrome中）：

td.zero_width {
    width: 1%;
}

然后在你的HTML中：

<td class="zero_width">...</td>

- alexk

---

啊，是的，它将“列2”和“列3”的内容换行了，但我可以使用“nowrap”来修复它。 - EvilPuppetMaster

Answer 3

我试过使用width: 100%;，但是似乎没有一个具有固定宽度的容器

，这不会获得预期的结果。相反，我使用类似下面的东西，这似乎给我最好的结果。

.column-fill { min-width: 325px; }

这样如果需要，它就可以变得更大，而且似乎浏览器会将所有额外的空间给设置为此方式的列。不确定是否适用于所有人，但在chrome中对我有效（尚未尝试其他浏览器）...值得一试。

- daveomcd