Table's tr selection with background colour does not work

HTML-CSS
1

If I do not apply inline style element to TR tag then the things are working fine. But, If I apply a style as I mentioned then row selection which goes to the bottom of the table not work. The code below

<head>
  <title>HTML Table Example</title>
  <style>
    /* Highlighted row style */
    .highlighted {
      background-color: yellow;
    }

    /* Darker and bolder font style */
    th,
    td {
      font-weight: bold;
      color: #333;
    }
  </style>
  <script>
    window.onload = function() {
      var currentIndex = 0;
      var rows = document.querySelectorAll('tr.highlightable');

      function selectNextRow() {
        rows[currentIndex].classList.remove('highlighted');
        currentIndex = (currentIndex + 1) % rows.length;
        rows[currentIndex].classList.add('highlighted');
        rows[currentIndex].scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });
      }
      // Highlight the first row initially
      rows[currentIndex].classList.add('highlighted');
      setInterval(selectNextRow, 10000);
    }
  </script>
</head>
1 Like
2

I think you will have to provide us with more information. Also, please post the HTML and all the code if that isn’t all of it.

What inline styles? All I see are classes being applied.

What exactly doesn’t work when you do what?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

2 Likes
3 
<table class="highlightable" style="border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; font-size: 20px;" border="1">
  <tr>
    <th style="background-color: lightgray; padding: 10px; font-weight: bold;">ROW</th>
    <th style="background-color: lightgray; padding: 10px; font-weight: bold;">SONUM</th>
  </tr>
  <tr class="highlightable" style="background-color:#F0F8FF">
    <td style="padding: 10px; border: 1px solid #ddd;">1</td>
    <td style="padding: 10px; border: 1px solid #ddd;">23-00288-1</td>
  </tr>
  <tr class="highlightable" style="background-color:#F0F8FF">
    <td style="padding: 10px; border: 1px solid #ddd;">2</td>
    <td style="padding: 10px; border: 1px solid #ddd;">23-00487-3</td>
  </tr>
</table>
1 Like
4

I’m still not sure what you mean but you can’t overwrite inline styles with styles using classes unless you use !important. Inline styles have higher specificity than styles applied using classes.

Example:

.highlighted {
  background-color: yellow !important;
}
2 Likes
5

Thank you so much, one word just solved the case, I have spend a couple days for this weird matter. Appreciated…

1 Like
6

[quote=“lasjorg, post:4, topic:656286”]
you can’t overwrite inline styles with styles using classes unless you use
[/quote] I am not quite sure actually what you meant. Can you give me a sample about that, please?

7

Styles have different specificity (“weights”) calculated based on how they are applied.

The id selector # is 1-0-0, a class selector . is 0-1-0 and the type (element) selector is 0-0-1 the universal selector * is 0-0-0.

Inline styles in effect have 1-0-0-0 specificity so it overwrites all the above. Using !important raises the specificity of the style no matter what selector is used to the point that it can overwrite all other styles. It is not to be used unless you absolutely have to. Utility classes often use it, think of a show/hide class you know must win no matter what.

It is a bit more complicated, but that is the basics at least.

8

Appreciated, I do time to time HTLM-CSS-JS project on Visual Studio as Desktop project for dashboard project on TV screen. I need to know much better such specific details. Thank you again. I think that it is better to take a course for those concepts.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.