HTML `<table>` Row Highlighting optimization guide with CSS Variables - Seeking Cross-Browser Solution
I'm trying to implement a row highlighting feature in a `<table>` using CSS variables, but it's not working as expected in some browsers. I set up a hover effect where the background color switches based on a CSS variable, but it only works in Chrome and Firefox. In Edge, the background color doesn't change at all. Here's the relevant HTML and CSS: ```html <table class="my-table"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>30</td> </tr> <tr> <td>Bob</td> <td>25</td> </tr> </tbody> </table> ``` ```css :root { --highlight-color: lightblue; } .my-table tbody tr { transition: background-color 0.3s ease; } .my-table tbody tr:hover { background-color: var(--highlight-color); } ``` I have verified that the CSS variable is defined and the syntax seems correct. Additionally, I checked for any CSS specificity issues that might be preventing the hover effect from applying but didn't find any. The CSS works well in the developer tools when tested directly, but when rendered in Edge, it ignores the hover state completely. I've tried clearing the cache and even testing in private mode, but the scenario continues. Any thoughts on what might be going wrong or how I can get this to work across all major browsers? I'm working in a macOS environment. I'd love to hear your thoughts on this.