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

【问题标题】：What is the proper CSS way to implement right-aligned text on table columns?在表格列上实现右对齐文本的正确 CSS 方法是什么？
【发布时间】：2010-11-26 10:24:05
【问题描述】：

令我惊讶的是，我刚刚发现在当前浏览器中对表格列应用文本对齐的支持相当糟糕。 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;
}

为什么这不起作用？我还尝试（通过萤火虫）关闭 Firefox 左对齐 TD 元素的本机规则，但这也不起作用。

我可以看到在数量 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 上设置类。我有哪些选择？

【问题讨论】：

标签： css html-table alignment

【解决方案1】：

我不想在每行中的相关 td。什么是我的选项？

就是这样：每个 td 上的类。

【讨论】：

我讨厌接受这个答案，但其他现有选项可能过于锁定或特定于浏览器
跨浏览器包括 IE6 意味着只有两个选项：每个 TD 或 Javascript 上的类，第一个选项要好得多。
呃。 >.

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您不想手动将类添加到列中的每个单元格，则唯一的其他选择是使用 javascript 来完成。

使用 jQuery：

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

【讨论】：

【解决方案4】：

你总是可以在一行的最后一个元素上设置一个类：

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

【讨论】：

是的，或者更一般的 nth-child。当然这些是 CSS3 选择器，所以不要指望 IE 支持。 IE7+ 只有 CSS2 的第一个孩子。

【解决方案5】：

您的回答让我开始考虑创建一个解析 COL 元素的 JQuery 脚本。然后它应该找到与相应 COL 匹配的每一行，并将 COL 类应用于每个元素，如下所示：

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

但只有在类定义中包含 text-align 时才这样做（作为性能改进）。

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

对这个想法有什么想法吗？

【讨论】：