Question

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

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

（不幸的是，Firefox不支持align标记的col属性。）

Answer 1

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

.second {
   text-align: right;
}

你也可以使用CSS3。

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

（它不适用于＆lt; = 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列和第2列。 7右对齐，3居中，只需：

<table class="tr2 tc3 tr7">

虽然CSS不是超级优雅，但替代方案更不优雅：即每个表的自定义类，或要求每个tr具有class="ralign"或类似的。

Doesn't work with IE8

Answer 4

派对迟到了，但我自己就是这个问题，所以我想我会分享一个决议。值得注意的是，只有在使用LESS时，此答案才适用。

您不必手动将类或样式添加到每个单元格，而是可以在LESS中使用循环来创建可应用于表格的一系列类：

// 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（在此示例中），它们将使适用列的文本居中。对于右对齐文本，它也会对.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>

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

Answer 5

为第二列中的每行中的每个单元格或单元格添加一个类都可以。

.second {
   text-align: right;
}

或

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

tr.second {
   text-align: right;
}

Answer 6

我认为这是最简单的方法：如果您有一个三列表和一个像我这样的两个单元格的页脚，则可以应用以下规则：

tr td:nth-child(3),tfoot tr td:nth-child(2){
    text-align:center;
}

我知道这是一个非常老的问题。但是作为一个初学者，有时我以前遇到过同样的问题，而且我已经用这种方法解决了这个问题。

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

6 个答案: