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

时间:2020-03-06 14:34:34  来源:igfitidea点击:

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

该表的实际内容可以有所不同,但是总会有一个主列和两个或者更多其他列。我想使主列占用尽可能多的宽度,而不管其内容如何,​​而其他列则占用尽可能小的宽度。我无法为任何列指定确切的宽度,因为它们的内容可以更改。

我如何使用简单的语义有效的html表和CSS做到这一点?

例如:

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

解决方案

我远非CSS专家,但这对我有用(在IE,FF,Safari和Chrome中):

td.zero_width {
    width: 1%;
}

然后在HTML中:

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

与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"。