html设置表格平分,如果未知数量,如何在HTML表格中均匀分配列宽？

Thomas Praxl..

9

如果您至少了解了最大列数:这里是仅在给定一定数量的列时才应用某些分布的解决方案.

我的例子只关注原理并创建均匀分布的列.请注意,使用表格布局时这是超流体:固定和宽度:100%.

您可以轻松扩展此解决方案以指定除剩余列之外的第一列的宽度.

比如,允许的最大列数为4(包括可能的行标题).鉴于您在表中使用tbody,如下例所示:

XABC

1.abc

[...]

CSS代码:

table{table-layout:fixed;width:100%;}

tbody>tr>*:nth-last-child(2)~*{ width:50%}

tbody>tr>*:nth-last-child(3)~*{ width:33.3%}

tbody>tr>*:nth-last-child(4)~*{ width:25%}

它说:应用于行的倒数第二个元素的以下兄弟:宽度50%.(除了第一个元素之外,这是所有列,如果至少有2列).如果有两列,三列,四列或更多列,则应用此选择器.

但是之后:

应用于行的第三个最后一个元素的以下兄弟:宽度33.3%:再次:此选择器仅在至少有三个元素时有效.它会覆盖前一个选择器的规则(nth-last-child(2)),因此您的列现在的宽度为33.3%.如果只有两列,则不应用此选择器.

然后:四列相同.它再次覆盖先前定义的规则.

请注意,您需要为每个可能的列数定义宽度.因此,如果最多允许有20个列,那么这将是21行css.

我相信这个解决方案与IE9 +兼容,而不是IE8.但我目前还不是百分百肯定.请访问http://caniuse.com/css-sel3