CSS使表格列占用尽可能多的空间，其他cols尽可能少

我需要用CSS布局html数据表。CSS使表格列占用尽可能多的空间，其他cols尽可能少

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

我怎样才能做到这一点使用简单的语义有效的HTML表和CSS只？

例如：

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

来源

2008-09-23 EvilPuppetMaster

哦，并且采用了跨浏览器兼容的方式。而且没有javascript :-) – EvilPuppetMaster 2008-09-23 01:33:12

我从一个CSS专家很远，但这个工作对我来说（在IE，FF，Safari和Chrome）：

td.zero_width { 
    width: 1%; 
}

然后在你的HTML ：

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

来源

2008-09-23 01:38:07

嗯，它包裹了'Col 2'和'Column 3'的内容，但是我可以用nowrap来修复它。谢谢！ – EvilPuppetMaster 2008-09-23 02:08:46

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

来源

2008-09-23 02:06:40 Dan

我还没有成功与width: 100%;，因为它似乎没有一个具有固定宽度的容器div这将不会得到预期的结果。相反，我使用类似以下的东西，它似乎给了我最好的结果。

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

这样可以得到更大的，如果需要，它似乎是取其列设置这样的浏览器将会给所有的额外空间。不知道它是否适用于所有人，但是对我来说是否适用于铬（没有尝试过其他）......值得一试。

来源

2013-05-31 18:35:36 daveomcd

CSS使表格列占用尽可能多的空间，其他cols尽可能少

回答

相关问题