Šime Vidas2d ago
Bramus

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain: the reality was that only one of both would stick.

A recent change to CSS fixes this: `position: sticky` now plays nice with _single-axis scrollers_.

https://www.bram.us/2026/03/30/css-sticky-per-axis/

CSS position: sticky now sticks to the nearest scroller on a per axis basis!

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick. A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148.

Bram.us
Mar 30 at 12:30pmWeb
Show threadŠime Vidas2d ago

@bramus

> To make the wrapper scroll horizontally, you might instinctively reach for overflow-x: scroll (or auto). However, doing so will actually break the vertical stickiness we just achieved!

The overflow properties are such a mine field. Many dev hours will continue to be spent figuring out why sticky does not work as intended. Maybe DevTools could help by warning when a overflow declaration prevents a sticky value from working.

Show threadJan van Hellemond 1d ago
@bramus Hallefrickinlujah!