怎么做 <table> 列右对齐

Question

<table>
  <colgroup>
    <col>
    <col style='text-align:right'>
  </colgroup>
  <tbody>
    <tr>
      <td>Sample text</td>
      <td>This text should be right-aligned</td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div id='spacer' style='width:100px'>
          I'm a spacer
        </div>
      </td>
    </tr>
  </tbody>
</table>

导致文本不正确对齐。 如果将相同的样式应用于td元素，则效果很好。 如何在不将样式应用于每个td元素的情况下使列中的文本右对齐？

Answer 1

添加以下CSS：

table.tableClass tr td:nth-child(2) {
   text-align: right;
}

nth-child(之后的数字是列，因此在这种情况下将是2，因为它是第二列。小提琴： http : //jsfiddle.net/p97vdo2p/1/

Answer 2

HTML不是按列呈现，而是按行呈现。 这就是为什么存在<tr></tr> （表行），但没有<tc></tc> （表列）的原因。 话虽如此，最简单的样式化HTML列的方法是对给定列中的每个<td></td>应用相同的CSS类。 您可以手动为每个类输入相同的类，也可以通过JavaScript或服务器端脚本以编程方式编写。