我的页面中有一个表格,我使用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> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
答案 0 :(得分:110)
只有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>
。
答案 1 :(得分:25)
查看类似问题:Why is styling table columns not allowed?
由于事实,您只能设置边框,背景,宽度和可见性属性这些单元格不是列的直接后代,只是行的后代。
有一些解决方案。最简单的方法是为列中的每个单元格添加一个类。不幸的是,这意味着更多的HTML,但如果您从数据库等生成表格,则不应该成为问题。
现代浏览器(即非IE6)的另一种解决方案是使用一些伪类。 tr > td:first-child
将选择连续的第一个单元格。 Opera,Safari,Chrome和Firefox 3.5也支持:nth-child(n)
选择器,因此您可以定位特定列。
您还可以使用td+td
从第二列开始选择(实际上意味着“选择左侧有一个td
元素的所有td
元素。”{{1}从第三列中选择 - 您可以以这种方式继续,覆盖属性。老实说,这不是很好的代码。
答案 2 :(得分:4)
使用以下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>
答案 3 :(得分:0)
除了其他答案中提到的限制之外,截至2018年2月,由于存在错误,可见性:崩溃仍然无法对基于Chrome和Chromium的浏览器中的colgroup进行操作。请参阅“CSS col visibility:collapse does not work on Chrome”。所以我相信当前可用的属性只是边框,背景,宽度(除非你为Chrome和其他基于Chromium的浏览器使用某种polyfill)。可以在https://crbug.com/174167跟踪该错误。