在表列上实现右对齐文本的CSS方法是什么？

To my surprise I just found out that applying text-alignment to a table column is fairly bad supported in current browsers. Neither Firefox 3.5.2, Safari 4.0.3 or IE8 shows the "amount" column below as right aligned.

令我惊讶的是,我发现在当前浏览器中支持将text-alignment应用于表列是相当糟糕的。 Firefox 3.5.2,Safari 4.0.3或IE8都没有将右下方的“金额”列显示为右对齐。

HTML:

<table class="full_width">
  <caption>Listing employees of department X</caption>
  <col></col>
  <col></col>
  <col></col>
  <col class="amount" width="180"></col>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone number</th>
      <th>Email</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>+45 2373 6220</td>
      <td>john@doe.com</td>
      <td>20000</td>
    </tr>
  </tbody>
</table>

CSS

.amount{
  text-align: right;
}

Why isn't this working? Also I tried (via firebug) to turn off Firefox' native rule that left-aligns TD elements, but that didn't work either.

为什么这不起作用?此外,我尝试(通过firebug)关闭Firefox左对齐TD元素的原生规则,但这也不起作用。

I can see that setting background color rule in the amount css class actually works. So I know that the .amount class is applied to all columns:

我可以看到在css类中设置背景颜色规则实际上是有效的。所以我知道.amount类适用于所有列:

CSS

.amount{
  text-align: right;
  background-color: aqua;
}

The CSS 2 spec apparently says that only four attributes are supported by col element -- see Why is styling table columns not allowed?

CSS 2规范显然说col元素只支持四个属性 - 请参阅为什么不允许样式表列?

Criteria for selecting the best solution: must be supported fairly cross-browser (not necessarily in IE6 where I could live with using jquery or a conditional comment to include a specific solution). Also, I expect to apply multiple classes multiple different columns (ie. class="amount before_tax")

选择最佳解决方案的标准:必须支持相当跨浏览器(不一定在IE6中我可以使用jquery或条件注释来包含特定解决方案)。此外,我希望将多个类应用于多个不同的列(即.class =“amount before_tax”)

I'd hate to set classes on the relevant td in each row. What are my options?

我讨厌在每一行的相关td上设置类。我有什么选择?

5 个解决方案

#1

I'd hate to set classes on the relevant td in each row. What are my options?

我讨厌在每一行的相关td上设置类。我有什么选择?

That would be it: class on each td.

那就是它:每个td上课。

#2

If you don't want to add the class to each cell in a column manually, your only other option is to use javascript to do it.

如果您不想手动将列添加到列中的每个单元格,则唯一的其他选择是使用javascript来执行此操作。

With jQuery:

$("table tbody tr td:eq(3)").addClass("amount");

#3

You can always set a class on on the last element in a row:

您始终可以在行的最后一个元素上设置类:

.full_width td:last-child {
    text-align: right;
}

#4

you have to set the class on the td elements. I think that's the only way.

你必须在td元素上设置类。我认为这是唯一的方法。

#5

Your answers got me thinking about creating a JQuery script that parses COL elements. Then it should find each row matching the corresponding COL and apply the COL class to each element like so:

你的回答让我想到了创建一个解析COL元素的JQuery脚本。然后它应该找到与相应COL匹配的每一行,并将COL类应用于每个元素,如下所示:

enter code here$("table tbody tr td:eq(3)").addClass("amount");

在这里输入代码$(“table tbody tr td:eq(3)”)。addClass(“amount”);

But only do it, (as a performance improvement), if the class definition contains a text-align in it.

但只有这样做(作为性能改进),如果类定义中包含text-align。

Of course, a full complex implementation of colspan and COLGROUP elements will be overkill and most likely not supported.

当然,colspan和COLGROUP元素的完整复杂实现将是过度的,很可能不受支持。

Any thoughts on that idea?

对这个想法的任何想法?

#1