Anti-pattern · DS-TABLE-001, DS-TABLE-004
Overflow on the table wrapper
A sticky header sticks to its nearest scroll container. overflow-x: auto makes the wrapper one on both axes, so the header sticks to the wrapper and scrolls away with the page. overflow: auto clip does not fix it: clip computes to hidden, which is still a scroll container. Scroll inside each box to see what the header does.
.wrap { overflow-x: auto }Wrong. The header scrolls away.
Page content above the table. Scroll down.
| Account | Region | Owner | Seats | MRR | Renews |
|---|
.wrap { overflow: auto clip }Wrong. Same result.
Page content above the table. Scroll down.
| Account | Region | Owner | Seats | MRR | Renews |
|---|
simple: no overflow on the wrapperRight for a simple table. The header sticks to the page.
Page content above the table. Scroll down.
complex: overflow: auto + max-block-sizeRight for a complex table. The wrapper scrolls and the header sticks inside it.
Page content above the table. The table scrolls in its own box.
| Account | Region | Owner | Seats | MRR | Renews |
|---|