When attempting to create a striped Bootstrap table using Bootstrap v5.3.3, I encountered an issue with displaying cells with a red background using the Bootstrap "table-danger" class. Additionally, I wanted to highlight entire rows using the "table-warning" class. Unfortunately, the expected results were not achieved.
In the scenario outlined below, all cells in the last column are assigned the "table-danger" class. I used CSS to target all td elements with the "table-danger" class within a tr with the "table-warning" class and set the background-color to #fff3cd. However, in practice, only row #2 displays the desired behavior. Row #1's background remains red instead of turning yellow. When inspecting the "New-York" cell, the background color value is correct, but it does not display as expected.
The reason behind this unexpected behavior is unclear to me.
/* Higher specificity to target the table-danger cells inside table-warning rows */
tr.table-warning td.table-danger {
background-color: #fff3cd !important;
/* Ensure the table-warning background color is applied */
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1ecf1ec">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1a1c0f1e2e5b405d405d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container mt-5">
<table class="table table-striped">
<thead>
<tr class="table-warning">
<th scope="col">Row</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>#1</td>
<td>John Doe</td>
<td>25</td>
<td class="table-danger">New York</td>
</tr>
<tr class="table-warning">
<td>#2</td>
<td>Jane Smith</td>
<td>30</td>
<td class="table-danger">London</td>
</tr>
<tr>
<td>#3</td>
<td>Mark Johnson</td>
<td>35</td>
<td class="table-danger">Paris</td>
</tr>
</tbody>
</table>
</div>
</body>