我有一个包含大量行的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>标记上重复对齐或类参数。 （如果有1000行，我必须将 align ='right'或 class ='right-align-class'放1000次。）
有没有有效的方法呢？ 有没有直接的说法，将所有行中的第三列对齐？
答案 0 :(得分：55)
直接回答您的问题：否。没有更简单的方法可以在所有现代浏览器中获得一致的外观，而无需重复列上的类。 （虽然，见下面的re：nth-child。）
以下是最有效的方法。
HTML：
<table class="products">
<tr>
<td>...</td>
<td>...</td>
<td class="price">10.00</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td class="price">11.45</td>
<td>...</td>
<td>...</td>
</tr>
</table>
CSS：
table.products td.price {
text-align: right;
}
为什么你不应该使用nth-child：
CSS3伪选择器nth-child对此非常适合 - 并且效率更高 - 但是在现有的实际网络上使用它是不切实际的。 It is not supported by several major modern browsers，包括6-8的所有IE。不幸的是，这意味着今天a significant share（至少40％）的浏览器不支持nth-child。
所以，nth-child很棒，但如果你想要一致的外观和感觉，那么使用它是不可行的。
答案 1 :(得分：11)
您可以使用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;
}
这将匹配任何前面两列的列。
答案 2 :(得分：9)
如果它始终是第三列，您可以使用它（假设表类为“products”）。虽然它有点hacky，如果你添加一个新列，它就不健壮了。
table.products td+td+td {
text-align: right;
}
table.products td,
table.products td+td+td+td {
text-align: left;
}
但老实说，最好的想法是在每个细胞上使用一个类。您可以使用col元素设置列的宽度，边框，背景或可见性，但不能设置任何其他属性。 Reasons discussed here
答案 3 :(得分：3)
将您的完全问题仔细阅读隐含问题：
步骤1：使用您描述的类（或者，如果必须，使用内联样式）。
步骤2：打开GZIP压缩。
创造奇迹;）
通过这种方式，GZIP可以为您（通过线路，无论如何）移除冗余，并且您的源仍然符合标准。
答案 4 :(得分：0)
多年前（仅在IE浏览器中）我使用的是<col align="right">标签，但我刚测试了它，而且它似乎只是IE的一个功能：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
</body>
</html>
摘录摘自www.w3schools.com。当然，它不应该被使用（除非出于某种原因你真的只针对IE渲染引擎），但我认为提到它会很有趣。
修改
总的来说，我不明白放弃这个标签的推理恐惧。它看起来非常有用（至少对于手动HTML发布而言）。
答案 5 :(得分：0)
这在IE6中不起作用，这可能是个问题，但它可以在IE7 +和Firefox，Safari等中使用。它会将第3列对齐，并且所有后续列都会保留。
td + td + td { text-align: right; }
td + td + td + td { text-align: left; }
答案 6 :(得分：0)
如果你只有两种“列式” - 使用一种作为TD，一种作为TH。然后，声明表的类和该表的TH和TD的子类。然后你的HTML可以超级高效。
答案 7 :(得分：0)
CSS Selectors Level 4的当前草案指定了网格的结构选择器。如果实施，我们将能够执行以下操作：
th.price,
th.price || td {
text-align: right;
}
当然，这对我们今天没有帮助 - 这里的其他答案为此提供了足够的实用建议。
答案 8 :(得分：0)
HTML5 弃用了大部分 col 属性并且没有添加对 style 和 class 属性的支持，这真的很不酷。现代浏览器仍然holds support for its width attribute，但不适用于其他浏览器。宽度支持可能会保持，因为它在 table layout 渲染算法中使用。
要实现类似的功能而不需要编辑每一行，可以通过定义来实现
.right-1 td:nth-child(1),
.right-2 td:nth-child(2),
.right-3 td:nth-child(3),
.right-4 td:nth-child(4),
.right-5 td:nth-child(5), ...
{ text-align: right; }
在一些 CSS 预处理器/生成器的帮助下，它可以是一行，但没有它仍然可以接受，因为大多数 Web 表格都有合理数量的列。然后右对齐第三列，你可以
<table class="right-3">
...
</table>
CSS 类应该保持语义。如果它们暗示特定的样式（如上面的示例中），则它在语义上只是合法化的内联 style 属性，将 HTML 与设计合并（CSS 应该将其分开）。这就是 Bootstrap 样式所做的，如果可能，您应该避免这样做。
答案 9 :(得分：-1)
你真正想要的是：
<col align="right"/>
但看起来Gecko还不支持这个：它一直是an open bug for over a decade。
（Geez，为什么Firefox不能像IE6那样拥有像样的标准支持？）
答案 10 :(得分：-2)
使用jquery以不显眼的方式将类应用于所有tr。
$（“table td”）。addClass（“right-align-class”）;
如果您想选择特定的td，请在td上使用增强型过滤器。
请参阅jquery
答案 11 :(得分：-2)
表格中的<colgroup>和<col>标记就是为此目的而设计的。如果您的表格中有三列并希望与第三列对齐，请在打开<table>标记后添加此列：
<colgroup>
<col />
<col />
<col class="your-right-align-class" />
</colgroup>
以及必要的CSS：
.your-right-align-class { text-align: right; }
从W3开始：
定义和用法
<col>标记定义表格中一列或多列的属性值。
<col>标记对于将样式应用于整个列非常有用，而不是为每一行重复每个单元格的样式。