Question

我有一张表格，其中col为colgroup，背景颜色为灰色。

我有背景颜色为橙色的tr

<table >
    <colgroup>
        <col class="col"  />
        <col  />
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>        
    </tr>
    <tr class="tr">
        <td>3</td>
        <td>4</td>        
    </tr>
</table>

的CSS：

.col{
    background-color: grey !important;       
}

.tr{
      background-color: orange; 
}

table{

    width: 100%;
}

我想要col col覆盖tr颜色。

我该怎么办？

在示例中，3必须是灰色但是橙色

http://jsfiddle.net/VsgA6/1/

Answer 1

CSS规范规定，仅当单元格和行都具有透明背景时才应用列背景（请参阅http://www.w3.org/TR/CSS21/tables.html#columns）。

您必须在tr或td上设置颜色。

例如td:first-child {background: grey}

Answer 2

如果您需要每行中的第一个TD为灰色，请使用：

td:first-child {background: grey}

Answer 3

试试这段代码

<table >
    <colgroup>
        <col class="col" />
        <col class="col"  />
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>        
    </tr>
    <tr>
        <td>3</td>
        <td class="tr">4</td>        
    </tr>
</table>




 .col{
        background-color: grey !important;       
    }

    .tr {
          background-color: orange; 
    }

    table{

        width: 100%;
    }

DEMO

Answer 4

代替第n个子TD规范

TD:first-child {background: grey}
TD:nth-child(2) {background: red}

要覆盖TR背景色，您还可以通过使用部分透明的TR或TD颜色（而不是橙色）来混合颜色

.tr {
      background-color: #FB28; 
}

并使用COL。

colgroup背景颜色不覆盖tr背景颜色

4 个答案: