请看这个 fiddle :
我已将第一列设置为以红色背景显示。
但是,奇数/偶数样式覆盖了它。即使添加了 !important;
有什么办法可以解决这个问题吗? (无需向
添加类tr.row_odd td {
background:#efefef;
}
tr.row_even td {
background:green;
}
.col1 { background:red !important; }
<table>
<col class="col1"></col>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
最佳答案
首先,让我们处理标记。我相信 <col>
应该是自闭合的,因为它不能包含任何文本或子元素,而且它应该被包裹在 <colgroup>
中.您甚至可能需要额外的 <col>
每列的标签(所以 4 列意味着 4 个 <col>
的)。
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
现在,在对 CSS 进行了一些尝试后,似乎取决于如何将 CSS 应用于列和 <tr>
的。如果删除属于 <tr>
的样式的你会看到样式被正确应用。
因此我得出结论,样式以分层方法应用,可能是因为列是表格的一种元细节。一个简单的想象方法是 <tr>
标签位于列的顶部,因为您定义了一个 background-color
对于 <tr>
列样式不显示 - 由于颜色不透明。如果设置 <tr>
的 background-color
到 RGBA 值,您将看到列颜色“闪耀”。
查看您的 fiddle 的修改,以进行演示:http://jsfiddle.net/uqJHf/4/
希望对您有所帮助,它确实对我有帮助,因为我在调查期间自己在这里学到了一些新东西。
编辑: 似乎 IE9 不同意我所说的,它似乎没有将 RGBA 值应用于 <tr>
如果<col>
有一个 background-color
放。虽然在 Firefox 7 中工作......
关于css - 表格样式 - col 类应该覆盖 td 类。如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8257360/