css - 在表格列上实现右对齐文本的正确 CSS 方法是什么？

Question

令我惊讶的是，我刚刚发现在当前浏览器中对表格列应用文本对齐的支持相当差。 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 元素的 native 规则，但这也不起作用。

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

CSS

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

CSS 2 规范显然说 col 元素只支持四个属性——参见 Why is styling table columns not allowed?

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

我不想在每一行的相关 td 上设置类。我有哪些选择？

Answer 1

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

就是这样:在每个 td 上上课。