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元素只支持四个属性 - 请参阅Why is styling table columns not allowed?

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

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

Answer 1

我不想在上面设置课程每行相关的td。我的是什么选项？

就是这样：每个td上课。

Answer 2

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

使用jQuery：

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

Answer 3

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

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

Answer 4

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

Answer 5

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

enter code here $（“table tbody tr td：eq（3）”）。addClass（“amount”）;

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

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

对这个想法的任何想法？

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

5 个答案: