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

类似于 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 应用于单元格。