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

Question

令我惊讶的是,我发现在当前浏览器中支持将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;
}

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

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

CSS

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

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

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

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

Answer 1

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

那就是它:每个td上课.