Search code examples
htmlcsshoverhtml-table

Is there a pure-CSS way to highlight a html table column on hover?

Is there a pure-CSS way to highlight a html table column on hover?

So when you hover over on <td>, all of the other <td> of that same child position would take on the same style?

I looked at <col> tag, but didn't seem to do what I expected.

Solution

  • Looks like what you want is done by CSS Tricks

    Basically you just set a crazy high height on the TDs on hover and then give a background. Seems to be a pretty interesting thought to do this. They love their hacks. The table{ overflow: hidden; } is super key here.

    WORTH NOTING.... Can't do nested with this approach.

    The negative z-index keeps it below the content. Negative z-index is a fun trick, but beware this table then can't be nested within other elements with backgrounds, otherwise the highlight will go below them.