CSS 使表格列占用尽可能多的空间，而其他列占用尽可能少的空间

Question

我需要用 CSS 布局 html 数据表。

表的实际内容可能有所不同，但始终有一个主列和 2 个或更多其他列。我想让主列占用尽可能大的宽度，无论其内容如何，​​而其他列占用尽可能小的宽度。我无法指定任何列的确切宽度，因为它们的内容可能会发生变化。

如何仅使用简单的语义有效的 html 表和 css 来做到这一点？

例如：

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <--------> 

Answer 1

我远不是 CSS 专家，但这对我有用（在 IE、FF、Safari 和 Chrome 中）：

td.zero_width {
    width: 1%;
}

然后在你的 HTML 中：

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

Answer 2

与 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 如果你想避免包裹的话，可以将其添加到细胞中。

Answer 3

我还没有取得成功 width: 100%; 因为看起来如果没有具有固定宽度的容器 div，这将无法获得预期的结果。相反，我使用类似下面的东西，它似乎给了我最好的结果。

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

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