如何均匀分布列宽度在HTML表时，他们的数量是未知的

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%}

它说:应用于一行最后第二个元素的以下兄弟元素:width 50%。(这是除第一个元素之外的所有列，如果有至少2列的话)。如果有两个、三个、四个或更多列，则应用此选择器。

然后:

应用于一行最后第三个元素的以下兄弟元素:width 33.3%: Again:此选择器仅在至少有三个元素时才起作用。它覆盖了前面选择器(nth-last-child(2))的规则，所以现在列的宽度为33.3%。如果只有两列，则不应用此选择器。

,然后:四列也是一样。它再次覆盖之前定义的规则。

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

我相信这个解决方案与IE9+兼容，而不是IE8。但目前我还不能百分百确定。见http://caniuse.com/css-sel3