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

Answer 2

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

td.zero_width {
    width: 1%;
}

然后在你的HTML中：

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

Answer 3

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

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

这样一来，如果需要它可以变得更大，并且似乎浏览器会为这样设置的任何列提供所有额外的空间。不确定它是否适用于所有人，但是对我来说是铬（没有尝试过其他人）......值得一试。

制作表格列的CSS占用尽可能多的空间，而其他小册子则占用很少

3 个答案: