css 在列组中使用文本居中对齐

mjqavswn  于 2023-03-14  发布在  其他
关注(0)|答案(4)|浏览(200)

我的页面中有一个表。我使用列组以相同的方式设置此列中所有单元格的格式。它对背景色和所有内容都很有效。但我似乎不明白为什么文本居中对齐不起作用。它不使文本居中对齐。
示例:

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

68bkxrlz1#

只有一组有限的CSS属性适用于列,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>

zbwhf8kr

zbwhf8kr2#

看一个类似的问题:Why is styling table columns not allowed?
您只能设置borderbackgroundwidthvisibility属性,因为单元格不是列的直接后代,而只能是行的直接后代。
有几种解决方案。最简单的是给列中的每个单元格添加一个类。不幸的是,这意味着更多的HTML,但如果你从数据库生成表格等,这应该不是一个问题。
现代浏览器(即非Internet Explorer 6)的另一个解决方案是使用一些伪类。tr > td:first-child将选择一行中的第一个单元格。Opera、Safari、Chrome和Firefox 3.5也支持:nth-child(n)选择器,以便您可以针对特定列。
你也可以使用td+td从第二列开始选择(它实际上意味着“选择左边有一个td元素的所有td元素”)。td+td+td从第三列开始选择--你可以继续这样做,覆盖属性。

qvsjd97n

qvsjd97n3#

使用下面的CSS,您可以将一个或多个类附加到table元素,以便相应地对齐其列。
中央支助系统

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

超文本标记语言

<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/

njthzxwz

njthzxwz4#

除了其他答案中提到的限制外,截至2018年2月,visibility:collapse 仍然无法在Chrome和基于Chromium的浏览器中的列组上运行,原因是存在一个bug。
所以我相信目前可用的属性只有边框、背景和宽度(除非你在Chrome和其他基于Chrome的浏览器上使用了某种polyfill)。

相关问题