有没有办法设置表中的整个列的文本alignment方式?

有没有简单的方法来设置第二列中的所有单元格的文本alignment?

或者是唯一的方法是为列中的每个单元格设置alignment方式?

(不幸的是, col标签的align属性在Firefox中不受支持。)

在第二列的每个单元格中添加一个类。

 .second { text-align: right; } 

你也可以使用CSS3。

 tr td:nth-child(2) { /* I don't think they are 0 based */ text-align: right; } 

(它不会在<= IE8中工作)

我相信,下面的工作,并不需要注释每行的第二个单元格与类。

 td:first-child + td { text-align: right; } 

这个规则会select一个td紧跟在它的父节点的第一个孩子td之后。 在典型的表中,这将select每行中的第二个单元格。

虽然不是特别优雅,但我喜欢在我的站点范围内的CSS文件中折腾这样的东西:

 .tr1 td:nth-child(1), .tr1 th:nth-child(1), .tr2 td:nth-child(2), .tr2 th:nth-child(2), .tr3 td:nth-child(3), .tr3 th:nth-child(3), .tr4 td:nth-child(4), .tr4 th:nth-child(4), .tr5 td:nth-child(5), .tr5 th:nth-child(5), .tr6 td:nth-child(6), .tr6 th:nth-child(6), .tr7 td:nth-child(7), .tr7 th:nth-child(7), .tr8 td:nth-child(8), .tr8 th:nth-child(8), .tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right } .tc1 td:nth-child(1), .tc1 th:nth-child(1), .tc2 td:nth-child(2), .tc2 th:nth-child(2), .tc3 td:nth-child(3), .tc3 th:nth-child(3), .tc4 td:nth-child(4), .tc4 th:nth-child(4), .tc5 td:nth-child(5), .tc5 th:nth-child(5), .tc6 td:nth-child(6), .tc6 th:nth-child(6), .tc7 td:nth-child(7), .tc7 th:nth-child(7), .tc8 td:nth-child(8), .tc8 th:nth-child(8), .tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center } 

然后只要指定你想要中间或右alignment的列号,即如果你想列2和7右alignment,3居中,只要做:

 <table class="tr2 tc3 tr7"> 

虽然CSS不是非常优雅的,但是替代scheme更不优雅:即为每个表格定制一个类,或者要求每个tr具有class="ralign"或相似的类。

不适用于IE8

将一个类添加到第二列中的每个单元格或单元格将会工作。

 .second { text-align: right; } 

要么

将类添加到tr并在样式表中添加以下css。

 tr.second { text-align: right; } 

晚会晚了,但我只是自己有这个问题,所以认为我会分享一个决议。 值得注意的是,这个答案只适用于使用LESS的情况 。

无需手动将类或样式添加到每个单元格,您可以使用LESS中的循环来创build可应用于表的一系列类:

 // Loop for @i until @i = @n // Much like - for($i=0; $i<=$n; $i++) // .table-cols(@n, @i: 1) when (@i =< @n) { .table-center-col-@{i} { tr > td:nth-child(@{i}) { text-align: center; } } .table-right-col-@{i} { tr > td:nth-child(@{i}) { text-align: right; } } // Continue the iteration .table-cols(@n, (@i + 1)); } .table-cols(16); 

这将产生一个类,如.table-center-col-1 ,直到.table-center-col-16 (在这个例子中),并且它们将使适用的列的文本居中。 对于右alignment的文本,也可以使用.table-right-col-n

您可以调整提供的数字(从16)到任何事物,以确保它涵盖了您在表中可能有的最大列数。 对于可变列号,这对你没有多大的帮助。

那么你所要做的就是把它应用到表格中:

 <table class="table-center-col-4"> <thead> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> <td>Column 5</td> </tr> </thead> <tbody> <tr> <td>x</td> <td>x</td> <td>x</td> <td>x</td> <td>x</td> </tr> </tbody> </table> 

第四列中的所有单元格现在都具有居中的文本。