html - 如何将其中一列的文本居中

Question

我知道这很有趣，但我从未听说过使用标签 col 将特定列居中的最佳方法

我有桌子

<table>
<colgroup>
    <col />
    <col style="text-align: center;" />
</colgroup>
<tbody>
<tr>
    <td>
    </td>
    <td>
       I must be in center
    </td>
</tr>
<tbody>
</table>

但它没有使我的文字居中，我想知道为什么？

Answer 1

<table>
<colgroup>
    <col />
    <col style="text-align: center;" />
</colgroup>
<tbody>
<tr>
    <td>
    </td>
    <td class="center">
       I must be in center
    </td>
</tr>
<tbody>
</table>

CSS：

.center{
 text-align:center;
}

http://jsfiddle.net/cty4q/

Answer 2

虽然在一个完美的世界中，您的解决方案可以工作，但 CSS 级联并不完全以这种方式工作。但并非如此，因为 CSS 选择器很强大。在我看来，您最好的选择是使用:nth-childor :nth-of-type。

或者，您可以向您的单元格添加一个类名（手动或最好以编程方式），但这只是采取简单的方法;-)

进一步阅读：

• 我可以使用 CSS3 选择器吗
• 如何:nth-child工作。

更新：

不过，显然，可以将样式应用于实际colgroup：http: //jsfiddle.net/aRYqx/。