在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次.)

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

Answer 1

直接回答你的问题:没有.没有更简单的方法可以在所有现代浏览器中获得一致的外观,而无需重复列上的类. (虽然,见下文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对此非常有用 - 并且效率更高 - 但它在现有的实际网络上使用是不切实际的. 几个主要的现代浏览器都不支持它,包括6-8的所有IE 浏览器.不幸的是,这意味着今天的大部分(至少40%)浏览器都不支持nth-child .

所以,nth-child很棒,但是如果你想要一致的外观和感觉,那么使用它是不可行的.

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

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

Answer 3

如果它始终是第三列,您可以使用它(假设表类"产品").虽然它有点hacky,如果你添加一个新列,并不健壮.

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

但老实说,最好的想法是在每个细胞上使用一个类.您可以使用该col元素设置列的宽度,边框,背景或可见性,但不能设置任何其他属性.这里讨论的原因.

Answer 4

查看您的确切问题，找出隐含的问题：

第 1 步：按照您的描述使用该类（或者，如果必须的话，使用内联样式）。

步骤 2：打开 GZIP 压缩。

它有奇迹；）

这样，GZIP 就可以为您消除冗余（无论如何，通过网络），并且您的源仍然符合标准。