Bootstrap 4 table with table-fixed class 不会设置背景色

Question

我很久以前就看过一些类似的问题，但找不到符合当前情况的最新内容。

我有一个 table，它使用“table-fixed”和“table-striped”classes，但不显示背景颜色交替行。

如果我删除“table-fixed”class，条纹会按设计工作。
如果我使用 DevTools 检查 table 行，我可以看到背景颜色设置正确。但它显示不正确。

这是相关的代码块：

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

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

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

Bootstrap 4 table with table-fixed class 不会设置背景色

Bootstrap 4 table with table-fixed class won't set background-color

html

css

background-color

twitter-bootstrap

bootstrap-table