70

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

例子:

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

4 回答 4

119

只有一组有限的 CSS 属性适用于 columns,而text-align不是其中之一。

请参阅“为什么只有四个属性适用于表列的奥秘”,了解为什么会出现这种情况。

在您的简单示例中,修复它的最简单方法是添加以下规则:

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

这将使所有表格单元格居中,除了第一列。这在 IE6 中不起作用,但在 IE6text-align 中确实(错误地)在列上起作用。我不知道 IE6 是否支持所有属性,或者只是一个更大的子集。

哦,您的 HTML 无效。<thead>错过了一个<tr>

于 2009-08-06T10:43:56.430 回答
25

请参阅类似问题:为什么不允许样式表列?

您只能设置边框背景宽度可见性属性,因为单元格不是列的直接后代,而是行的直接后代。

有几个解决方案。最简单的方法是为列中的每个单元格添加一个类。不幸的是,这意味着更多的 HTML,但如果您从数据库等生成表格,这应该不是问题。

现代浏览器(即不是 IE6)的另一个解决方案是使用一些伪类。tr > td:first-child将选择一行中的第一个单元格。Opera、Safari、Chrome 和 Firefox 3.5 也支持:nth-child(n)选择器,因此您可以定位特定列。

您也可以使用td+td从第二列开始选择(它实际上意味着“选择左侧td有一个元素的所有元素)。从第三列中选择 - 您可以以这种方式继续,覆盖属性。但老实说,这不是很好代码。tdtd+td+td

于 2009-08-06T11:11:55.437 回答
5

使用以下 CSS,您只需将一个或多个类附加到 table 元素,以便相应地对齐其列。

CSS

.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}

HTML

<table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>

示例:http: //jsfiddle.net/HHZsw/

于 2013-08-14T12:56:40.890 回答
0

除了其他答案中提到的限制之外,截至 2018 年 2 月,由于存在错误,visibility:collapse 仍然不适用于基于 Chrome 和 Chromium 的浏览器中的 colgroups。请参阅“ CSS col visibility:collapse 在 Chrome 上不起作用”。所以我相信当前可用的属性只是边框、背景、宽度(除非你为 Chrome 和其他基于 Chromium 的浏览器使用某种 polyfill)。可以在https://crbug.com/174167跟踪该错误。

于 2018-02-22T23:13:23.187 回答