具有表固定类的 Bootstrap 4 表不会设置背景颜色

Posted 2023-05-08

【中文标题】具有表固定类的 Bootstrap 4 表不会设置背景颜色

【英文标题】：Bootstrap 4 table with table-fixed class won't set background-color

【发布时间】：2021-08-05 02:39:28

【问题描述】：

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

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

如果我删除“table-fixed”类，条带化将按设计工作。 如果我使用 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 高度：300px； 溢出-y：自动； 宽度：100%； .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th 显示：块； .table-fixed tbody td，.table-fixed tbody th，.table-fixed thead > tr > th 向左飘浮; 位置：相对； .table-fixed tbody td::after, .table-fixed tbody th::after, .table-fixed thead > tr > th::after 内容： ''; 明确：两者； 显示：块； /* * * 自定义表格条带化 * */ .table-striped#jobtable tbody tr:nth-child(odd) 背景颜色：#cef5d8 ！重要； th, td 边框底部：1px 实心#ddd；

【参考方案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;