使用colgroup中的文本alignment中心

我在我的页面中有一个表，我使用colgroups以同样的方式格式化这个列中的所有单元格，适用于背景颜色和所有。 但似乎无法弄清楚为什么文本alignment中心不起作用。 它不会alignment文本居中。

例：

<table id="myTable" cellspacing="5"> <colgroup id="names"></colgroup> <colgroup id="col20" class="datacol"></colgroup> <colgroup id="col19" class="datacol"></colgroup> <colgroup id="col18" class="datacol"></colgroup> <thead> <th>&nbsp;</th> <th>20</th> <th>19</th> <th>18</th> </thead> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table> 

CSS：

 #names { width: 200px; } #myTable .datacol { text-align: center; background-color: red; } 

Answer 1

只有有限的一组CSS属性适用于列 ，并且text-align不是其中之一。

请参阅“为什么只有四个属性适用于表列”的奥秘来描述为什么是这种情况。

在你的简单例子中，解决这个问题最简单的方法就是添加这些规则：

 #myTable tbody td { text-align: center } #myTable tbody td:first-child { text-align: left } 

这将以所有表格单元为中心，除了第一列。 这在IE6中不起作用，但是在IE6中， text-align 确实 （错误地）在列上工作。 我不知道IE6是否支持所有的属性，或只是一个更大的子集。

哦，你的HTML是无效的。 <thead>错过了一个<tr> 。

Answer 2

查看类似的问题： 为什么样式表列不允许？

您只能设置边框 ， 背景 ， 宽度和可见性属性，因为单元格不是列的直接后代，只能是行。

有几个解决scheme。 最简单的方法是在列中的每个单元格中添加一个类。 不幸的是，这意味着更多的HTML，但不应该成为一个问题，如果你从数据库中生成表等

现代浏览器（即不是IE6）的另一个解决scheme是使用一些伪类。 tr > td:first-child会select连续的第一个单元格。 Opera，Safari，Chrome和Firefox 3.5也支持:nth-child(n)select器，因此您可以定位特定的列。

你也可以使用td+td从第二列开始select（实际上是指“select所有td元素在其左边有一个td元素） td+td+td从第三列中select – 你可以继续以这种方式，重写属性，老实说，这不是很好的代码。

Answer 3

使用以下CSS，您可以将一个或多个类附加到表格元素，以便相应地alignment其列。

CSS

 .col1-right td:nth-child(1) {text-align: right} .col2-right td:nth-child(2) {text-align: right} .col3-right td:nth-child(3) {text-align: right} 

HTML

 <table class="col2-right col3-right"> <tr> <td>Column 1 will be left</td> <td>Column 2 will be right</td> <td>Column 2 will be right</td> </tr> </table> 

例如： http : //jsfiddle.net/HHZsw/