Highlight columns in HTML tables with <colgroup>

This content originally appeared on Bram.us and was authored by Bramus!

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 →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-03-26T20:36:35+00:00) Highlight columns in HTML tables with <colgroup>. Retrieved from https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/

MLA

" » Highlight columns in HTML tables with <colgroup>." Bramus! | Sciencx - Friday March 26, 2021, https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/

HARVARD

Bramus! | Sciencx Friday March 26, 2021 » Highlight columns in HTML tables with <colgroup>., viewed ,<https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/>

VANCOUVER

Bramus! | Sciencx - » Highlight columns in HTML tables with <colgroup>. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/

CHICAGO

" » Highlight columns in HTML tables with <colgroup>." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/

IEEE

" » Highlight columns in HTML tables with <colgroup>." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/. [Accessed: ]

rf:citation

» Highlight columns in HTML tables with <colgroup> | Bramus! | Sciencx | https://www.scien.cx/2021/03/26/highlight-columns-in-html-tables-with-colgroup/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.