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

Question

我有一个垂直标题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>

和css我有

.dialogTable {

overflow-y:hidden;
margin-left: 6px;
}

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

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

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

Answer 1

你想要像这样

＆＃13;

＆＃13;

tbody tr:nth-child(odd){
  background-color: #EBEBE8;
  color: #666666;
}
tbody tr:nth-child(even){
  background-color: #ffffff;
  color: #666666;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

看起来你想要整行并且你在正确的轨道上，但你只是定位th而不是整行。

尝试使用tr代替th：

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

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

也许只从其中一种样式开始，以确保您的nth-child选择器正常工作。

Answer 3

您的代码正在寻找.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;
}

Answer 4

选择器错了。它应该是

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