引导4表固定类不会设置背景颜色

Question

我很久以前就见过一些类似的问题，但是找不到任何符合当前情况的最新问题。

我有一个表，它使用“table fixed”和“table striped”类，但不显示备用行的背景色。

• 如果我删除表固定类，条带按设计工作。
• 如果我使用DevTools检查表行，我可以看到背景色设置正确。但它不能正确显示。

以下是相关的代码块：

Jobs.cshtml

<table id="jobtable" class="table table-sm  table-fixed  table-striped table-condensed ">
        <thead style="background-color: lightgray">
            <tr>
                <th scope="col" class="col-1" style="text-align:center">@Html.CheckBoxFor(m => Model.AllSelected, new { value = Model.AllSelected, id = "ckboxall" })</th>
                <th scope="col" class="col-1" style="text-align:center">#</th>
                <th scope="col" class="col-4" style="text-align:left">Format</th>
                <th scope="col" class="col-1" style="text-align:left">Qty</th>
                <th scope="col" class="col-5" style="text-align:left">Status</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 1; i < 8; i++)
            {
            <tr>
                <td class="col-1" style="text-align:center">@Html.CheckBoxFor(m => Model.AllSelected, new { value = Model.AllSelected, @class = "ckbox" })</td>
                <td class="col-1" style="text-align:center">@i</td>
                <td class="col-4" style="text-align:left">Test</td>
                <td class="col-1" style="text-align:left">Test</td>
                <td class="col-5" style="text-align:left">Test</td>
                </td>
            </tr>
          </tbody>
      </table>

site.css

    .table-fixed tbody {
        height: 300px;
        overflow-y: auto;
        width: 100%;
    }
    
    .table-fixed thead,
    .table-fixed tbody,
    .table-fixed tr,
    .table-fixed td,
    .table-fixed th {
        display: block;
    }
    
    .table-fixed tbody td, .table-fixed tbody th, .table-fixed thead > tr > th {
        float: left;
        position: relative;
    }
    
    .table-fixed tbody td::after, .table-fixed tbody th::after, .table-fixed thead > tr > th::after {
        content: '';
        clear: both;
        display: block;
    }
    /*
    *
    * Custom Table Striping
    *
    */
    .table-striped#jobtable tbody tr:nth-child(odd) {
        background-color: #cef5d8 !important;
    }
    
    th, td {
        border-bottom: 1px solid #ddd;
    }

Answer 1

您应该更改自定义表条带化代码

 #jobtable.table-striped tbody tr:nth-child(odd){
            background-color: #cef5d8 !important;
        }

            th, td {
                border-bottom: 1px solid #ddd;
            }

到这个

#jobtable.table-striped tbody tr:nth-child(odd)>td{
            background-color: #cef5d8 !important;
        }

            th, td {
                border-bottom: 1px solid #ddd;
            }