html - 在 colgroup 中使用文本对齐中心

Question

我的页面中有一个表格，我使用 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;
}

Answer 1

只有 a limited set of CSS properties applies to columns , 和 text-align不是其中之一。

参见 "The mystery of why only four properties apply to table columns"了解为什么会这样。

在您的简单示例中，最简单的修复方法是添加这些规则:

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

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

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