表样式 - col类应该覆盖td类..怎么样？

Question

看到这个小提琴:

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>s 相关的样式,您将看到正确应用样式.

因此,我已经得出结论,样式是以分层方法应用的,可能是因为列是表的一种元细节.一个简单的方法想象这是该<tr>标签在上面分层之列,因为你已经定义了一个background-color对<tr>列的造型并没有显现出来-由于颜色是不透明的.如果将<tr>'s background-color设置为RGBA值,您将看到列颜色"闪耀".

请参阅您的小提琴的修改,以进行演示:http://jsfiddle.net/uqJHf/4/

希望有所帮助,它肯定对我有所帮助,因为我在调查期间自己在这里学到了一些新知识.

编辑:看来,IE9不与我说的,它似乎并没有给RGBA值应用于同意<tr>,如果<col>有一个background-color组.在Firefox 7中工作虽然...