在 colgroup 中使用文本对齐中心

Posted 2023-03-05

【中文标题】在 colgroup 中使用文本对齐中心

【英文标题】：using text-align center in colgroup

【发布时间】：2010-11-17 07:26:34

【问题描述】：

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

【参考方案1】：

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

【参考方案2】：

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

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/

【讨论】：

true，虽然很小的说明：这些选择器是CSS3 选择器，可在 IE9 及更高版本中使用。如果需要支持低版本的IE，则不能使用此方法。

【参考方案3】：

只有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>。

【讨论】：

所以你说这是不可能的，他实现这一目标的唯一方法是在 TD 元素本身上做到这一点

是的。我为您的示例添加了一个修复程序，但如果表格变得更复杂，这将不起作用。 DisgruntledGoat 提供了更多解决方案。

这两个关于 thead 中缺少 tr 的建议也是无效的。 th 不属于 tbody 并且 td 不属于 thead。只需添加一个 tr 来包含 thead 中的 th。

@graywh，我同意最好将th 保留在thead 中，因此我删除了我的建议。不过，在tbody 中有一个th 或在thead 中有一个td 是完全有效的，并且可能是合适的。例如。标题列不能放在thead 中，标题的描述可以放在thead 中的tds 中。但这里的情况可能都不是。

@wtjones，那是因为 IE 怪癖模式（在任何版本的 IE 中）本质上与 IE5.5 相同（所以不要使用它！）。如果你别无选择，你可以让它在怪癖模式下工作，就像在 IE6 中一样（即通过在 col/colgroup 上设置 text-align 无论如何）。

【参考方案4】：

查看类似问题：Why is styling table columns not allowed?

您只能设置 border、background、width 和 visibility 属性，因为单元格不是列的直接后代，而是行的直接后代。

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

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

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