Highlight columns in HTML tables with <colgroup>

Interesting find by Manuel Matuzovic:

The other day I looked up colgroup on MDN […] the demo at the beginning of the page caught my attention. The author adds a class to the col element, which does nothing with the col element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.

Like so:


See the Pen
Highlight columns in HTML tables with `<colgroup>`
by Bramus (@bramus)
on CodePen.

Manuel also shares how to highlight a column upon clicking the table header.

Highlighting columns in HTML tables →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.