在colgroup中使用文本对齐中心

小编典典

在colgroup中使用文本对齐中心

html

我的页面中有一个表格，我使用colgroups以相同的方式设置此列中的所有单元格的格式，对背景颜色和所有颜色均适用。但似乎无法弄清为什么文本对齐中心不起作用。它不会使文本居中对齐。

例：

<table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS：

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

阅读 542

2020-05-10

共1个答案

小编典典

只有有限的CSS属性集适用于column，而text-align不是其中之一。

有关这种情况的说明，请参见“为什么只有四个属性应用于表列的奥秘”。

在您的简单示例中，最简单的解决方法是添加以下规则：

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

这将使所有表单元格居中，第一列除外。这在IE6中text-align 不起作用 ，但在IE6 _中_确实（错误地）在列上起作用。我不知道IE6是否支持所有属性，还是仅支持更大的子集。

哦，您的HTML无效。<thead>错过了<tr>。

2020-05-10