Html Question posted in
Some basic documentation can be found here.

Html – Inline CSS for background-color not showing

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.
Cells on odd row have gray background instead of red despite having inline style assigned a red background
Short sample showing the problem
The Chrome DevTools shows that the cell should have a red background but it is displayed with a gray one

Tags:

2

Answers


  1. 0

    I would have thought inline styles have the highest specificity

    Yes, it does. Not only that, but table-striped styles are defined at the <row> level, so regardless of specificity, the red at the <td> should always show on top because the item is inside, thus render "on top" of the other one

    So there must be something either wrong with your HTML or overriding the styles somehow like messing with the z-index or something. Without a minimal reproducing example is hard to say

    Please dont post code images, but rather a code snipped with a code that reproduces the error

    in the meantime see below your code implemented using the examples on the bootstrap page, and it does work as expected

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="background-color: red">1</td>
      </tr>
      <tr>
        <td style="background-color: red">2</td>
      </tr>
      <tr>
        <td style="background-color: red">3</td>
      </tr>
    </tbody>
  </table>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search