Skip to content

Explain why col backgrounds can be hidden by cell backgrounds - #44980

Open
quepasaquepasa wants to merge 1 commit into
mdn:mainfrom
quepasaquepasa:explain-column-background-painting
Open

Explain why col backgrounds can be hidden by cell backgrounds#44980
quepasaquepasa wants to merge 1 commit into
mdn:mainfrom
quepasaquepasa:explain-column-background-painting

Conversation

@quepasaquepasa

Copy link
Copy Markdown
Contributor

Fixes #44816

The reporter followed the article's own instructions — copy blank-template.html + minimal-table.css, then try the <colgroup>/<col> shading — and the column colors never appeared.

That's expected once you know the painting order: per CSS tables, backgrounds are painted table → column group → column → row group → row → cell, so a cell's own background covers the column's. minimal-table.css sets one on th and on alternating rows:

th { background-color: rgb(235,235,235); }
tr:nth-child(even) td { background-color: rgb(250,250,250); }
tr:nth-child(odd) td { background-color: rgb(245,245,245); }

so every cell in the table already has a background and nothing from <col> shows through.

The live sample on the page is unaffected — its hidden CSS only sets border/padding on td, th, no background — which is why the example renders correctly on MDN while the reader's copy does not.

Added a note explaining the painting order and pointing out which rules to remove from the stylesheet copy. I kept it to a note rather than changing minimal-table.css in the learning-area repo, since those backgrounds are deliberate elsewhere in the module.

@quepasaquepasa
quepasaquepasa requested a review from a team as a code owner July 31, 2026 04:40
@quepasaquepasa
quepasaquepasa requested review from dipikabh and removed request for a team July 31, 2026 04:40
@github-actions github-actions Bot added Content:Learn Learning area docs size/xs [PR only] 0-5 LoC changed labels Jul 31, 2026
@Josh-Cena
Josh-Cena requested review from chrisdavidmills and removed request for dipikabh August 12, 2026 23:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:Learn Learning area docs size/xs [PR only] 0-5 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

colgroup css examples don't work as expected because minimal-table.css already has th and td rules

2 participants