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

Question

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

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

（很遗憾，Firefox 不支持col 标签的align 属性。）

Answer 1

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

.second {
   text-align: right;
}

您也可以使用 CSS3。

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

（在

Answer 2

向第二列中的每个单元格或行中的单元格添加一个类将起作用。

.second {
   text-align: right;
}

或

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

tr.second {
   text-align: right;
}

Answer 3

我相信以下方法会起作用，并且不需要用类注释每行的第二个单元格。

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

此规则将选择紧跟 td 的 td，该 td 是其父项的第一个子项。在典型的表格中，这将选择每行中的第二个单元格。

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 到 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

虽然不是特别优雅，但我喜欢在我的站点范围的 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" 或类似的。

Doesn't work with IE8

Answer 6

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

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

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