I have a bootstrap table-striped table. In this case, odd rows typically have gray background. Bootstrap CSS version is v5.3.2.
But if I add style="background-color: red" directly to the <td> elements, cells on odd rows still show a gray background instead of a red one. Why would the background still appear as gray instead of red? I would have thought inline styles have the highest specificity.
For context, the reason for I wanted to assign inline style is to highlight specific cells that has important information, but the result is unexpected, hence this question and the simple example given.
It’s the same on both Chrome and Edge browsers.
Below is a very simple example, showing that the cells in odd rows are still gray instead of red, despite having inline style setting the background to red.
>Solution :
I believe that the .table-striped class applies background color on the <tr> element, and not the <td> element.
I tried to replicate your issue, but was in vain. But I did see that when I tried to set the same for <tr> it did not override the color.
I tried changing some things in the devtools, and found that setting --bs-table-bg to none like this:
<table class="table table-striped " style="--bs-table-bg:none;">
i was able to fix it. This might cause other issues, so make sure to check if other row backgrounds are unaffected in your case.
Check your markup for issues as well since I wasn’t able to get your exact issue replicated.