在 HTML 表格中右对齐文本的更好方法

Question

我有一个包含大量行的 HTML 表格，我需要右对齐一列。

我知道以下方法，

 <tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

和

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

在这两种方法中，我必须在每个 <tr> 标签上重复 align 或 class 参数。 （如果有 1000 行，我必须放 align=‘right’ 或 class=‘right-align-class’ 1000 次。）

有没有有效的方法来做到这一点？ 有没有直接的说法，将所有行中的第三列向右对齐？

原文由 Palani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新（10 多年后！）： 是的！现在可以通过广泛的实用浏览器支持更有效地执行此操作，使用 nth-child 选择器。

HTML：

 <table>
<tr>
<td>foo 1</td>
<td>bar 1</td>
<td>baz 1</td>
<td>bap 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>bar 2</td>
<td>baz 2</td>
<td>bap 2</td>
</tr>
</table>

CSS：

 table td { width: 20em; border: 1px solid black; }
table td:nth-child(3) { text-align: end; }

https://jsfiddle.net/mv83qszL/

以前，这是不可能做到的，因为浏览器支持过去常常是不一致的和偶然的，尤其是对于较新的 CSS 功能。这使得使用更优雅、更高效的解决方案变得不可能——并且需要大量重复的标记和类定义才能在观众的浏览器空间中获得一致的结果。

请参阅此答案先前版本的编辑历史记录。

原文由 Matt Howell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 nth-child 伪选择器。例如：

 table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

然后在你的桌子上做：

 <table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

编辑：

不幸的是，这只适用于 Firefox 3.5。但是，如果您的表格只有 3 列，您可以使用兄弟选择器，它具有更好的浏览器支持。下面是样式表的样子：

 table.align-right-3rd-column td + td + td
{
  text-align: right;
}

这将匹配前面有两个其他列的任何列。

原文由 cdmckay 发布，翻译遵循 CC BY-SA 2.5 许可协议