Html 垂直标题表-标题和行颜色相同

我有一个垂直标题的html表格，我试图让标题和行是相同的颜色，但交替。这幅画说明了我想要什么

这是我的桌子

  <table class="dialogTable" cellspacing="0" style="height: 450px">
    <caption><h4>Validation Results</h4></caption>
    <tr>
        <th width="250px">Source Records</th>
        <td width="400px">{{dialogData.totalNumRecords}}</td>
    </tr>
    <tr>
        <th width="250px">New Records</th>
        <td>{{dialogData.numNewRecords}}</td>
    </tr>
    <tr>
        <th width="250px">Updated Records</th>
        <td>{{dialogData.numUpdatedRecords}}</td>
    </tr>
    <tr>
        <th width="250px">Removed Records</th>
        <td>{{dialogData.numDeletedRecords}}</td>
    </tr>
    <tr>
    <th valign="top" width="250px">Error Message</th>
    <td class="dialogstyle" valign="top" >
        <div class="errortext" ng-repeat="error in dialogData.errors" valign="top">{{error}}</div></td>
    </tr>
</table>

现在标题都是相同的颜色。

---

谢谢你

看起来你想要整行，而且你走的是对的，但是你的目标是第th行而不是整行

尝试tr而不是th：

---

可以从这些样式中的一种开始，以确保第n个子选择器正常工作。

您的代码正在寻找.dialogTable作为直接父级。事实并非如此。试试这个。此外，您的代码只对行的一半着色。改为使用表行

.dialogTable {
overflow-y:hidden;
margin-left: 6px;
}

.dialogTable tr:nth-child(even) {
background-color: #eee !important;
}

.dialogTable tr:nth-child(odd) {
background-color: #fff !important;
}

---

选择器错了。应该是

.dialogTable tr:nth-child(even) {
   //add bg colour
}
.dialogTable tr:nth-child(odd) {
   //add bg colour
}

---

你想这样吗

tbody tr:n childodd{ 背景色：EBEBE8； 颜色：666666； } tbody tr:第n个孩子{ 背景色：ffffff； 颜色：666666； } 验证结果 源记录 {{dialogData.totalNumRecords} 新记录 {{dialogData.numNewRecords} 最新记录 {{dialogData.numUpdateRecords} 删除的记录 {{dialogData.numDeletedRecords}} 错误消息 {{error}}

---

为什么不直接使用bootstrap呢？bootstrap有实现这一点的类吗？是的。请参见“条带行”下的“是否也对标题进行条带化？”是：但您可能需要重新设计表的结构。如果这需要更多的时间，那么只需使用其中一个答案。这适用于行而不是标题。你认为我有什么矛盾吗？对于标题，你必须给每个人一个类名。你到底想去哪里？

.dialogTable {
overflow-y:hidden;
margin-left: 6px;
}

.dialogTable tr:nth-child(even) {
background-color: #eee !important;
}

.dialogTable tr:nth-child(odd) {
background-color: #fff !important;
}

.dialogTable tr:nth-child(even) {
   //add bg colour
}
.dialogTable tr:nth-child(odd) {
   //add bg colour
}