更改动态添加偶数行的html表格背景色

我有下面的示例html表定义

   <table id="myDynamicTable"  class="table-striped" >
            <thead class="ui-widget-header_custom dataTables_wrapper no-footer">
            <tr id="uploadrow_0" class="">
                <th style="white-space: nowrap;display: table-cell;width: 2px; text-align: center " class="text-left" >
                    Row#
                </th>
                   <th  style="white-space: nowrap;display: table-cell;text-align: center " class="text-left msr_d_col_widths_nationality">
                    Nationality
                </th>
                <th style="white-space: nowrap;display: table-cell; text-align: center " class="text-left">
                    No of Visitors
                </th>
                <th style="white-space: nowrap;display: table-cell;text-align: center " class="text-left msr_d_col_widths_remark">
                    Remarks
                </th>
            </tr>
        </thead>
        <tbody>
                      @if (Model.VisitDetails.Any())
                      {
                          foreach (var item in Model.VisitDetails)
                          {
                              @Html.Partial("VisitDetailsPartial", item);
                          }
                      }
                      else
                      {
                          item.RowId = 1;
                          item.NationalityList = ViewBag.NationalityList;
                          @Html.Partial("VisitDetailsPartial", item);
                      }
        </tbody>
    </table>

“Report”控件中的“Add”操作将“VisitDetailSpatial”作为添加到表中的新行返回

以下是访问详细定义。

 @model SolutionName.ViewModel.VisitDetailsViewModel
 <tr class="">
    @using (Html.BeginCollectionItem("item"))
    {
        <td class="autoGenNumber" style="width: 5px" >
              @if (Model == null)
            {
                var item = new VisitDetailsViewModel
                {
                    NationalityList = ViewBag.NationalityList,
                };
                @Html.LabelFor(x => item.RowId, item.RowId.ToString(), new { style = "", @class = "autoGenNumber" })
            }
            else
            {
                @Html.LabelFor(x => Model.RowId, Model.RowId.ToString(), new { style = "", @class = "autoGenNumber" })
            }  
        </td>
            <td class="">
            @Html.DropDownListFor(model => model.NationalityId, new SelectList(Model.NationalityList, "Value", "Text", Model.NationalityId), "Select", new { @id = "ddlNationalityList" })
        </td>
       <td class="">
            @Html.TextBox("txtNumberOfVisits", Model.NumberOfVisits, new { id = "txtNumberOfVisits"})    
        </td>
         <td class="">
            @Html.TextBoxFor(x => Model.Remarks, new { id = "txtRemarks", Multiline = true})
        </td>
    } 
</tr>

}

如果我将同样的方法应用于一个表，其中的行不是来自局部视图，那么CSS工作得很好

---

不确定上面我错过了什么。

< P> OK，我通过修改CSS来工作，如下所示，尽管在上面的标记中，我似乎不明白为什么我认为第1列实际上被列为第2列。

这个版本有效

    .table-striped > tbody > tr:nth-of-type(even) > td:nth-child(2) {
    background-color: #e0f0ff; 
}

---

可能的副本我已尝试在我的浏览器上使用您的规则，并已看到它的工作。请看我的。

.table-striped > tbody > tr:nth-of-type(even) td:first-child {
  background-color: #e0f0ff;

    .table-striped > tbody > tr:nth-of-type(even) > td:nth-child(2) {
    background-color: #e0f0ff; 
}