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中设置列样式的最简单方法是将相同的CSS类应用于给定列中的每个<td></td>。您可以手动为每个类输入相同的类，或者您可以通过javascript或服务器端脚本以编程方式编写它。

如何使列右对齐

2 个答案: