position: sticky (inline)
A wide table that keeps its first column
| City | Sessions | Bounce | Pages |
|---|---|---|---|
| Auckland | 4 812 | 61% | 2.4 |
| Bergen | 3 190 | 58% | 2.1 |
| Cádiz | 2 774 | 64% | 2.9 |
| Dakar | 2 015 | 49% | 1.8 |
| Esbjerg | 1 640 | 52% | 2.0 |
| Faro | 1 288 | 47% | 1.6 |
| Galway | 1 004 | 44% | 1.4 |
CaveatThe corner cell is sticky in two directions at once, so it has to outrank both the header row and the pinned column. Give it the highest z-index of the three or the scrolling cells paint straight over it.
FallbackEvery sticky cell needs its own opaque background. Sticky does not create a new layer, so without one the rows underneath show through as you scroll.
/* the frozen column */
.pin { position: sticky; left: 0; z-index: 1; }
thead th { position: sticky; top: 0; z-index: 2; }
/* both at once, so it beats both */
thead .pin { z-index: 3; }Published