CSS 让表格列占用尽可能多的空间，而其他列则尽可能少答案

【问题标题】：CSS to make a table column take up as much room as possible, and other cols as littleCSS 让表格列占用尽可能多的空间，而其他列则尽可能少
【发布时间】：2010-09-12 05:30:31
【问题描述】：

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

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

我怎样才能使用简单的语义有效的 html 表和 css 来做到这一点？

例如：

|主栏 |第 2 栏 |第 3 栏 | 根据内容尽可能薄：

【问题讨论】：

哦，还有跨浏览器兼容的方式。而且没有 javascript :-)

标签： css css-tables column-width

【解决方案1】：

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

td.zero_width {
    width: 1%;
}

然后在你的 HTML 中：

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

【讨论】：

啊，是的，它包含了 'Col 2' 和 'Column 3' 的内容，但我可以用 nowrap 解决这个问题。谢谢！

【解决方案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 应用于单元格。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：