有没有办法在表中设置整列的文本对齐方式？

Question

有没有一种简单的方法可以将第二列中所有单元格的文本对齐方式设置为right？

或者唯一的方法是为列中的每个单元格设置对齐方式？

(不幸的是,Firefox不支持align该col标记的属性.)

Answer 1

将类添加到第2列中的每个单元格.

.second {
   text-align: right;
}

你也可以使用CSS3.

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

(它不适用于<= IE8)

Answer 2

我相信以下内容可行,不需要使用类来注释每行的第二个单元格.

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

此规则将在td之后立即选择一个td,该td是其父级的第一个子级.在典型的表中,这将选择每行中的第二个单元格.

Answer 3

虽然不是特别优雅,但我喜欢在我的网站范围的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 }

然后只需指定您想要居中或右对齐的列号,即如果您希望第2列和第7列右对齐,以及3居中,只需执行以下操作:

<table class="tr2 tc3 tr7">

虽然CSS不是超级优雅,但替代方案甚至不那么优雅:即每个表的自定义类,或者要求每个表tr具有class="ralign"或类似.

不适用于IE8