css - 表格样式 - col 类应该覆盖 td 类。如何？

Question

请看这个 fiddle :

http://jsfiddle.net/uqJHf/

我已将第一列设置为以红色背景显示。

但是，奇数/偶数样式覆盖了它。即使添加了 !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>

Answer 1

首先，让我们处理标记。我相信 <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 中工作......