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

Is there a way to set the text alignment of entire column in a table?

提问by Misha Moroshko

Is there a simple way to set the text alignment of all cells in the second column to right?

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

Or is the only way is to set the alignment for each cell in the column?

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

(Unfortunately, the alignattribute of the coltag is not supported in Firefox.)

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

采纳答案by alex

Add a class to every cell in the 2nd column.

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

.second {
   text-align: right;
}

You could also use CSS3.

您也可以使用 CSS3。

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

(It won't work in <= IE8)

（它不会在 <= IE8 中工作）

回答by Stephen Fuhry

While not particularly elegant, I like to toss something like this in my site-wide css file:

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

Then just specify which column numbers you want center or right aligned, i.e. if you want column 2 & 7 right aligned, and 3 centered, just do:

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

<table class="tr2 tc3 tr7">

While the CSS isn't super elegant, the alternatives are even less elegant: i.e. a custom class for each table, or requiring each trto have a class="ralign"or similar.

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

Doesn't work with IE8

不适用于 IE8

回答by smarcaurele

I believe that the following would work and not require annotating the second cell of each row with a class.

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

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

This rule would select a td immediately following a td that is the first child of its parent. In a typical table this would select the second cell in each row.

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

回答by Luke

Bit late to the party, but I just had this issue myself so thought I'd share a resolution. It's worth noting that this answer is only applicable if you are using LESS.

聚会有点晚了，但我自己也遇到了这个问题，所以我想我会分享一个解决方案。值得注意的是，此答​​案仅在您使用LESS 时适用。

Instead of having to manually add the class or style to each cell you can use loops in LESS to create a range of classes that you can apply to your tables:

不必手动将类或样式添加到每个单元格，您可以在 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);

This will produce a load of classes such as .table-center-col-1all the way up to .table-center-col-16(in this example) and they will make center the text of the applicable column. It will also do the same for right-aligned text, with .table-right-col-n.

这将产生大量的类，例如.table-center-col-1一直到.table-center-col-16（在本例中），它们将使适用列的文本居中。它也会对右对齐的文本执行相同的操作，使用.table-right-col-n.

You can adjust the number supplied (from 16) to anything to ensure that it covers you for the max amount of columns you may have in a table. For variable column numbers this won't be much help to you.

您可以将提供的数字（从 16 起）调整为任何值，以确保它涵盖您在表中可能拥有的最大列数。对于可变列号，这对您没有多大帮助。

Then all you have to do is apply it to the table:

然后你所要做的就是将它应用到表中：

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

All of the cells in the 4th column will now have centered text.

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

回答by Vijender Reddy

Adding a class to every cell or cell in a row in second column will work.

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

.second {
   text-align: right;
}

or

或者

add class to tr and add the following css in your style sheet.

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

tr.second {
   text-align: right;
}