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

Question

我正在使用JSF/ICEFaces,我需要从动态树结构生成一个表,其中包含未知(运行时)的行数和列数.该表必须具有width: 100%;占据其容器内的所有空间.

我能够生成表所需的所有标记,但我发现单元格的宽度不一样.

width: (100/numberOfColumns)%如果我知道我正在渲染的元素数量,那么设置CSS会很容易.不幸的是,我不能修改我的支持bean返回的类,所以我只能用ui:repeater组件迭代它们.

你知道是否有一种CSS方法可以确保表中的所有列具有相同的宽度,无论它是什么？

我不想使用Javascript方式.尽可能清晰的代码.

Answer 1

table {
    table-layout : fixed;
}

Answer 2

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

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

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

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

<table>
   <thead>
      <tr><th>X</th><th>A</th><th>B</th><th>C</th></tr>
   </thead>
   <tbody>
      <tr><th>1.</th><td>a</td><td>b</td><td>c</td></tr>
      [...]
   </tbody>
</table>

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