Question

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

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

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

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

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

Answer 1

table {
    table-layout : fixed;
}

Answer 2

如果您至少了解了最大列数：只有在给定一定数量的列时才会应用某些分布的解决方案。

我的例子只关注原理并创建均匀分布的列。请注意，使用table-layout时这是超流体：fixed和width：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

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

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

2 个答案: