我的页面中有一个表。我使用列组以相同的方式设置此列中所有单元格的格式。它对背景色和所有内容都很有效。但我似乎不明白为什么文本居中对齐不起作用。它不使文本居中对齐。
示例:
<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;
}
4条答案
按热度按时间68bkxrlz1#
只有一组有限的CSS属性适用于列,
text-align
不在其中。请参见"The mystery of why only four properties apply to table columns"以了解出现这种情况的原因。
在您的简单示例中,最简单的修复方法是添加以下规则:
这将使所有表格单元格居中,除了第一列。这在IE6中不起作用,但是在IE6中
text-align
* 确实 *(错误地)作用于列。我不知道IE6是否支持所有属性,或者只是一个更大的子集。哦,你的HTML是无效的。
<thead>
错过了<tr>
。zbwhf8kr2#
看一个类似的问题:Why is styling table columns not allowed?
您只能设置border、background、width和visibility属性,因为单元格不是列的直接后代,而只能是行的直接后代。
有几种解决方案。最简单的是给列中的每个单元格添加一个类。不幸的是,这意味着更多的HTML,但如果你从数据库生成表格等,这应该不是一个问题。
现代浏览器(即非Internet Explorer 6)的另一个解决方案是使用一些伪类。
tr > td:first-child
将选择一行中的第一个单元格。Opera、Safari、Chrome和Firefox 3.5也支持:nth-child(n)
选择器,以便您可以针对特定列。你也可以使用
td+td
从第二列开始选择(它实际上意味着“选择左边有一个td
元素的所有td
元素”)。td+td+td
从第三列开始选择--你可以继续这样做,覆盖属性。qvsjd97n3#
使用下面的CSS,您可以将一个或多个类附加到table元素,以便相应地对齐其列。
中央支助系统
超文本标记语言
示例:http://jsfiddle.net/HHZsw/
njthzxwz4#
除了其他答案中提到的限制外,截至2018年2月,visibility:collapse 仍然无法在Chrome和基于Chromium的浏览器中的列组上运行,原因是存在一个bug。
所以我相信目前可用的属性只有边框、背景和宽度(除非你在Chrome和其他基于Chrome的浏览器上使用了某种polyfill)。