用于使表格列占用尽可能多空间的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"。