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

Posted 2023-03-05

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

【英文标题】：Is there a way to set the text alignment of entire column in a table?

【发布时间】：2011-05-26 09:07:56

【问题描述】：

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

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

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

【参考方案1】：

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

.second 
   text-align: right;

您也可以使用 CSS3。

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

（在

【讨论】：

您可能是指第二列中的每个单元格。这就是我想做的。我只是想知道是否有更好的方法......

CSS3 允许以更好的方式进行操作，但目前并非所有浏览器都支持。

如果您使用tr td:first-child + td text-align:right; ，它将在 IE 上运行

@Cthulhu 哇！你在某个地方有这个答案吗？我想投赞成票。

@MrLister 实际上，您可以在下面找到相同的答案，来自 smarcaurele。还是谢谢你。

【参考方案2】：

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

.second 
   text-align: right;

或

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

tr.second 
   text-align: right;

【参考方案3】：

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

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

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

【参考方案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 列中的所有单元格现在都将具有居中的文本。

【参考方案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

【讨论】：

这实际上非常优雅。我一直在寻找这样的东西，并且因为自己没有想到它而自责。

如何使用“tr >”来处理 TD 和 TH 标签？您可以将每个.tr1 td:nth-child(1), .tr1 th:nth-child(1) 替换为.tr1 tr > :nth-child(1) 以减少50%。

@GarlandPope 如果我没记错的话，这在 IE11（和其他几个浏览器）中不起作用caniuse.com/…

【参考方案6】：

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

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

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