使用colgroup中的文本对齐中心 [英] using text-align center in colgroup

问题描述

我在我的页面中有一个表，我使用colgroups以相同的方式格式化此列中的所有单元格，适用于背景颜色和所有。但似乎无法弄清楚为什么text-align中心不工作。它不会使文本居中。

i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it does not align the text centered.

示例：

<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;
}

推荐答案

http://www.w3.org/TR/CSS2/tables.html#columnsrel =nofollow noreferrer>有限的一组CSS属性适用于列， text- align 不是其中之一。

Only a limited set of CSS properties applies to columns, and text-align isn't one of them.

请参阅为什么只有四个属性适用于表格列的谜题，说明为什么会出现这种情况。

See "The mystery of why only four properties apply to table columns" for a description of why this is the case.

在你的简单例子中，修改它的最简单的方法是添加这些规则：

In your simple example, the easiest way to fix it would be to add these rules:

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

这将集中所有表格单元格，第一列除外。这在IE6中不起作用，但是在IE6中， text-align 实际上（错误地）在列上工作。我不知道IE6是否支持所有属性，或者只是一个更大的子集。

That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-align does actually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.

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

Oh, and your HTML is invalid. <thead> misses a <tr>.

这篇关于使用colgroup中的文本对齐中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！