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

Question

I've seen some similar questions from long ago, but can't find anything up to date that fits the current situation.

I have a table which uses the "table-fixed" and "table-striped" classes, but does not display the background color for the alternate rows.

If I remove the "table-fixed" class, the striping works as designed.
If I inspect a table row using DevTools, I can see that the background-color IS set correctly. But it does NOT display correctly.

Here's the pertinent chunks of code:

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

Sandeep K Goyal · Accepted Answer · 2021-05-16 08:21:26Z

1

You should change Custom Table Striping Code

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

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

To This

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

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

answered May 16, 2021 at 8:21

Sandeep K Goyal

2802 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related