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

Question

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

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

我怎么能使用一个简单的语义上有效的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>