Ever since the update to Bootstrap 5.3.1, I've been facing an issue where two custom background colors are not overriding the colors set by Bootstrap, even when using !important. Strangely enough, they were working fine before the update.
Here are my styles:
table tr.shaded {
background-color:#e1e9ff !important;
}
table tr.highlight {
background-color:#eaeaf0 !important;
font-weight: bold;
}
In Bootstrap 5.3.1 (tables.scss:5), the code snippet is as follows:
.table {
...
--bs-table-bg: var(--bs-body-bg);
...
}
I have made sure that my CSS file is loaded after the Bootstrap file. Interestingly, if I disable the property mentioned above in Firefox's inspector, my custom background color shows up just fine.
I have gone through other threads discussing similar issues and can confirm that there are no typos in my CSS. It was functioning perfectly prior to the update, even without the use of !important. Additionally, all Bootstrap files are being loaded locally, and the entire website is accessible only on localhost - if that information is relevant.
I have tested this in both Firefox and Chrome, performing a full reload each time (Ctrl+Shift+R).
Any suggestions on how to resolve this?
EDIT: Adding the HTML code for reference.
<div class="col-lg-10 col-sm-12 table-responsive">
<table class="table table-hover table-sm table-borderless list">
<thead>
<tr class="shaded text-center align-middle">
<th width="25">ID</th>
<th>Project name</th>
<th>Languages</th>
<th>Client</th>
<th>Completed</th>
<th><strong>Profit</strong></th>
<th>Paid?</th>
<th>Invoice</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>