有没有办法设置表中的整个列的文本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>
第四列中的所有单元格现在都具有居中的文本。