Question

看到这个小提琴：

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

然而，奇数/偶数样式正在覆盖它。即使添加了！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>的{{1}}设置为RGBA值，您会看到列颜色“闪耀”。

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

希望有所帮助，它肯定对我有所帮助，因为我在调查过程中自己也学到了新的东西。

编辑：似乎IE9与我所说的不一致，如果background-color有<tr>，它似乎不会将RGBA值应用于<col> {{1套。在Firefox 7中工作虽然......

Answer 2

td:first-child
{
    background:red !important;
}

Answer 3

HTML <col>中的类不会被<td>继承。你需要adh'just HTML。将课程col1提供给表格行中的第一个<td>

http://jsfiddle.net/uqJHf/6/

-

<table>
    <colgroup>
        <col class="col1" />
        <col />
    </colgroup>
    <tbody>
        <tr class="row_odd">
            <td class="col1">test</td>
            <td>test</td>
        </tr>
        <tr class="row_even">
            <td class="col1">test</td>
            <td>test</td>
        </tr>
    </tbody>
</table>

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

3 个答案: