Custom background colour won't override Bootstrap 5.3's

After updating to Bootstrap to 5.3.1, two custom background colours won't override the colours defined by Bootstrap. Not even with !important added. They did override as expected before updating.

My styles are:

table tr.shaded {
    background-color:#e1e9ff !important;
}
table tr.highlight {
    background-color:#eaeaf0 !important;
    font-weight: bold;
}

Bootstrap 5.3.1 has (in tables.scss:5):

.table {
    ...
    --bs-table-bg: var(--bs-body-bg);
    ...
}

My CSS file is loaded after the Bootstrap file.

If I untick the above property in Firefox's inspector, my background colour is displayed.

I did read other threads with similar issues: there are no typos in my CSS and it was working fine before the update. I hadn't even added !important as above. The Bootstrap files are loaded locally; the entire website is available on localhost only – ifthat's relevant.

Tested in Firefox and in Chrome, after full reload (Ctrl+Shift+R).

Any ideas how to fix this?

EDIT: Adding the HTML code.

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

Solution

Bootstrap sets the background color for the table elements using the selector .table > :not(caption) > * > *. Your selector table tr.shaded is less specific, so it won’t override Bootstrap’s selector (even with !important).

I think you can achieve what you’re looking for by applying the background color to the th element, rather than the tr element.

tr.shaded th {
    background-color:#e1e9ff;
}
tr.highlight th {
    background-color:#eaeaf0;
    font-weight: bold;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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>
            <tr class="highlight 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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>