在 HTML 表格中右对齐文本的更好方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1332406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Better way to right align text in HTML Table
提问by Palani
I have an HTML table with large number of rows, and I need to right align one column.
我有一个包含大量行的 HTML 表，我需要右对齐一列。
I know the following ways,
我知道以下方法，
<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>
and
和
<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>
In both the methods, I have to repeat the align or class parameter on every <tr>tag. (If there are 1000 rows, I have to put align='right'or class='right-align-class'1000 times.)
在这两种方法中，我都必须在每个<tr>标签上重复 align 或 class 参数。（如果有 1000 行，我必须放置align='right'或class='right-align-class'1000 次。）
Is there any efficient way to do this ? Is there any direct way to say, align the third column in all rows to right ?
有没有有效的方法来做到这一点？有什么直接的方法可以说，将所有行中的第三列向右对齐吗？
回答by Matt Howell
To answer your question directly: no. There is no more simple way to get a consistent look and feel across all modern browsers, without repeating the class on the column. (Although, see below re: nth-child.)
直接回答您的问题：no。没有更简单的方法可以在所有现代浏览器中获得一致的外观和感觉，而无需重复列上的类。 （虽然，请参阅下文：nth-child。）
The following is the most efficient way to do this.
以下是执行此操作的最有效方法。
HTML:
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:
CSS：
table.products td.price {
text-align: right;
}
Why you shouldn't use nth-child:
为什么不应该使用 nth-child：
The CSS3 pseudo-selector, nth-child, would be perfect for this -- and much more efficient -- but it is impractical for use on the actual web as it exists today. It is not supported by several major modern browsers, including all IE's from 6-8. Unfortunately, this means that nth-child is unsupported in a significant share(at least 40%) of browsers today.
CSS3 伪选择器，nth-child，将是完美的——而且效率更高——但它在今天存在的实际网络上使用是不切实际的。 它不受几个主要的现代浏览器的支持，包括 6-8 的所有 IE。不幸的是，这意味着今天有很大一部分（至少 40%）的浏览器不支持 nth-child 。
So, nth-child is awesome, but if you want a consistent look and feel, it's just not feasible to use.
因此，nth-child 很棒，但是如果您想要一致的外观和感觉，则使用它是不可行的。
回答by cdmckay
You could use the nth-childpseudo-selector. For example:
您可以使用nth-child伪选择器。例如：
table.align-right-3rd-column td:nth-child(3)
{
text-align: right;
}
Then in your table do:
然后在你的桌子上做：
<table class="align-right-3rd-column">
<tr>
<td></td><td></td><td></td>
...
</tr>
</table>
Edit:
编辑：
Unfortunately, this only works in Firefox 3.5. However, if your table only has 3 columns, you could use the sibling selector, which has much better browser support. Here's what the style sheet would look like:
不幸的是，这只适用于 Firefox 3.5。但是，如果您的表只有 3 列，您可以使用同级选择器，它具有更好的浏览器支持。下面是样式表的样子：
table.align-right-3rd-column td + td + td
{
text-align: right;
}
This will match any column preceded by two other columns.
这将匹配前面有两个其他列的任何列。
回答by DisgruntledGoat
If it's always the third column, you can use this (assuming table class of "products"). It's kinda hacky though, and not robust if you add a new column.
如果它始终是第三列，则可以使用它（假设表类为“产品”）。虽然它有点hacky，如果你添加一个新列，它就不那么健壮了。
table.products td+td+td {
text-align: right;
}
table.products td,
table.products td+td+td+td {
text-align: left;
}
But honestly, the best idea is to use a class on each cell. You can use the colelement to set the width, border, background or visibility of a column, but not any other properties. Reasons discussed here.
但老实说，最好的主意是在每个单元格上使用一个类。您可以使用该col元素来设置列的宽度、边框、背景或可见性，但不能设置任何其他属性。原因在这里讨论。
回答by John Gietzen
Looking through your exactquestion to your impliedproblem:
通过您的确切问题查看您的隐含问题：
Step 1: Use the class as you described (or, if you must, use inline styles).
第 1 步：使用您描述的类（或者，如果必须，使用内联样式）。
Step 2: Turn on GZIP compression.
第 2 步：打开 GZIP 压缩。
Works wonders ;)
创造奇迹;)
This way GZIP removes the redundancy for you (over the wire, anyways) and your source remains standards compliant.
这样 GZIP 为您消除了冗余（无论如何都通过网络），并且您的源仍然符合标准。
回答by Jan Zich
A number of years ago (in the IE only days) I was using the <col align="right">tag, but I just tested it and and it seems to be an IE only feature:
几年前（仅在 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></td>
</tr>
</table>
</body>
</html>
The snippet is taken from www.w3schools.com. Of course, it should not be used (unless for some reason you really target the IE rendering engine only), but I thought it would be interesting to mention it.
该片段取自www.w3schools.com。当然，它不应该被使用（除非出于某种原因你真的只针对 IE 渲染引擎），但我认为提及它会很有趣。
Edit:
编辑：
- IE still supports it.
- Firefox has dropped support in 3.5.
- Safari does not seem to support it, but the documentation indicates otherwise.
- IE 仍然支持它。
- Firefox已在 3.5 中放弃支持。
- Safari 似乎不支持它，但文档另有说明。
Overall, I don't understand the reasoning behing abandoning this tag. It would appear to be very useful (at least for manual HTML publishing).
总的来说，我不明白放弃这个标签的原因。它看起来非常有用（至少对于手动 HTML 发布而言）。
回答by Eifion
This doesn't work in IE6, which may be an issue, but it'll work in IE7+ and Firefox, Safari etc. It'll align the 3rd column right and all of the subsequent columns left.
这在 IE6 中不起作用，这可能是一个问题，但它可以在 IE7+ 和 Firefox、Safari 等中运行。它会将第 3 列向右对齐，并将所有后续列向左对齐。
td + td + td { text-align: right; }
td + td + td + td { text-align: left; }
回答by John Marno
if you have only two "kinds" of column styles - use one as TD and one as TH. Then, declare a class for the table and a sub-class for that table's THs and TDs. Then your HTML can be super efficient.
如果您只有两种“种类”的列样式 - 使用一种作为 TD，一种作为 TH。然后，为该表声明一个类，并为该表的 TH 和 TD 声明一个子类。那么你的 HTML 可以非常高效。
回答by Chris
The current draft of CSS Selectors Level 4specifies structural selectors for grids. If implemented, we will be able to do things like:
CSS Selectors Level 4的当前草案指定了网格的结构选择器。如果实施，我们将能够执行以下操作：
th.price,
th.price || td {
text-align: right;
}
Of course, that doesn't help us today -- the other answers here offer enough practical advice for that.
当然，这对我们今天没有帮助——这里的其他答案为此提供了足够的实用建议。
回答by Chris
What you really want here is:
你真正想要的是：
<col align="right"/>
but it looks like Gecko doesn't support this yet: it's been an open bug for over a decade.
但看起来 Gecko 还不支持这个：十多年来，它一直是一个开放的错误。
(Geez, why can't Firefox have decent standards support like IE6?)
（天啊，为什么 Firefox 不能像 IE6 那样有像样的标准支持？）
