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

我有一张背景颜色为灰色的col in 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>

我想要颜色替代tr颜色

我该怎么办

在本例中，3必须为灰色，但为橙色

---

如果您需要在每一行中首先使用

TD

，请使用：

td:first-child {background: grey}

试试这个代码

<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%;
    }

1.
2.
3.
4.
上校{
背景色：灰色！重要；
}
.tr{
背景颜色：橙色；
}
桌子{
宽度：100%；
}

---

CSS规范规定，只有当单元格和行都具有透明背景时，才应用列背景（请参阅）

您必须在

tr

或

td

上设置颜色

---

例如，使用

td:first child{background:grey}

而不是第n个子td规范，如

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

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

.tr {
      background-color: #FB28; 
}

---

使用颜色。

谢谢，但第一个颜色是灰色的，例如，数据库中的一个值会导致列变为灰色。我决定使用的另一个解决方案是将交替条纹的背景颜色设置为例如rbga（200200，0.1）。这样，您可以通过斑马条纹看到高光。非常快速和干净的解决方案，几乎没有缺点。

.tr {
      background-color: #FB28; 
}