当列数未知时，如何在 HTML 表中平均分配列宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5713410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to equally distribute columns width in HTML table when the number of them is unknown?
提问by usr-local-ΕΨΗΕΛΩΝ
I am working with JSF/ICEFaces and I need to generate a table from a dynamic tree structure with an unknown (at run-time) number of rows and columns. The table must have width: 100%;so it occupies all the space inside its container.
我正在使用 JSF/ICEFaces，我需要从动态树结构中生成一个表，其中行数和列数未知（在运行时）。桌子必须有，width: 100%;所以它占据了容器内的所有空间。
I am able to generate all the markup required for the table, but I found that the cells' width is not the same.
我能够生成表格所需的所有标记，但我发现单元格的宽度不一样。
It would be easy for me to set CSS width: (100/numberOfColumns)%if I knew the number of elements I'm rendering. Unfortunately, I can't modify the classes returned by my backing bean so I can only iterate over them with ui:repeatercomponent.
width: (100/numberOfColumns)%如果我知道要渲染的元素数量，那么设置 CSS 就很容易了。不幸的是，我无法修改由我的支持 bean 返回的类，因此我只能使用ui:repeater组件遍历它们。
Do you know if there is a CSS way to make sure that all columns in a table have the same width, no matter what it is?
你知道是否有一种 CSS 方法可以确保表格中的所有列都具有相同的宽度，无论它是什么？
I wouldn't like to use the Javascript way. Just as cleaner code as possible.
我不想使用 Javascript 的方式。尽可能干净的代码。
回答by Mark Kahn
table {
table-layout : fixed;
}
回答by Thomas Praxl
If you have at least an idea regarding the maximumnumber of columns: here's the solution for applying certain distributions only if a certain amount of columns is given.
如果您至少对最大列数有一个想法：这里是仅在给定一定数量的列时应用某些分布的解决方案。
My example only concentrates on the principle and creates evenly distributed columns. Note that this is superfluid when using table-layout:fixed and width:100%.
我的例子只关注原理并创建均匀分布的列。请注意，这在使用 table-layout:fixed 和 width:100% 时是多余的。
You could easily extend this solution to specify the width of the first columns other than that of the remaining columns.
您可以轻松扩展此解决方案以指定除其余列的宽度之外的第一列的宽度。
Say, the maximum allowed number of columns is 4 (including possible rowheaders). Given you are using tbody in your table like in the following example:
比如说，允许的最大列数是 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 Code:
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%}
It says: Apply to the following siblings of the second last element of a row: width 50%. (That's all columns except the first element, if there are at least 2 columns). If there are two, three, four or more columns, this selector is applied.
它说：应用于行的倒数第二个元素的以下兄弟姐妹：宽度 50%。（这是除第一个元素之外的所有列，如果至少有 2 列）。如果有两列、三列、四列或更多列，则应用此选择器。
But then:
但是之后：
Apply to the following siblings of the third last element of a row: width 33.3%: Again: This selector works only if there are at least three elements. It overwrites the rules of the preceding selector (nth-last-child(2)), so that your columns now have the width 33.3%. This selector is not applied, if there are only two columns.
应用于行的倒数第三个元素的以下同级： width 33.3%：再次：此选择器仅在至少有三个元素时才起作用。它会覆盖前面的选择器 (nth-last-child(2)) 的规则，因此您的列现在的宽度为 33.3%。如果只有两列，则不应用此选择器。
And then: The same for four columns. It again overwrites the rules previously defined.
然后：四列相同。它再次覆盖先前定义的规则。
Be aware, that you need to define the width for each possible amount of columns. So, if there was a maximum number of 20 allowed columns, this would be 21 lines of css.
请注意，您需要为每个可能的列数定义宽度。因此，如果允许的最大列数为 20，则这将是 21 行 css。
I believe that this solution is compatible with IE9+, not IE8. But I'm currently not 100% sure. See http://caniuse.com/css-sel3
我相信这个解决方案兼容 IE9+，而不是 IE8。但我目前不是 100% 确定。见http://caniuse.com/css-sel3
