Dense Feature Comparison Matrix — Sticky Rows & Columns, No Library

A comparison table with four or more plans and a dozen-plus feature rows is too big to fit on screen at once, which normally forces a visitor to scroll and lose track of which row or which plan column they were even looking at. This snippet solves both problems simultaneously with pure CSS position: sticky — the plan header row stays pinned while scrolling down, the feature-name column stays pinned while scrolling right, and the top-left corner cell stays pinned in both directions at once, genuinely, not just one axis dressed up to look like both.

Why sticky-both-axes is harder than it looks

Making a header row sticky (position: sticky; top: 0) is common and well-documented. Making a *first column* sticky (position: sticky; left: 0) on its own is also common. Doing both at the same time, correctly, requires getting three separate rules right together — miss any one and either the corner cell scrolls away with the header, or the first-column cells overlap the header incorrectly, or z-index fighting makes cells render behind each other during scroll:

1. Every thead th gets position: sticky; top: 0 so the whole header row pins to the top of the scroll container. 2. Every tbody th (the first-column feature-name cells) gets position: sticky; left: 0 so the whole first column pins to the left. 3. The single corner cell — .cmg-corner, the top-left th in thead — gets both top: 0 and left: 0 simultaneously, plus the highest z-index of the three layers, so it stays fixed in both directions and always renders above the header row scrolling underneath it and the first column scrolling underneath it.

The z-index layering that makes it actually work

Without careful z-index ordering, sticky cells render in DOM order as they scroll under each other, producing visible seams or the wrong cell on top. This snippet layers it explicitly: the corner cell at z-index: 3 (highest, since it overlaps both other sticky layers), the header row at z-index: 2, the first column at z-index: 1, and ordinary body cells at the default stacking level. Each sticky cell also needs its own explicit background, since a transparent sticky cell lets the scrolling content behind it show through — an easy, common mistake that makes "sticky" cells look broken even when the positioning itself is correct.

`border-collapse: separate`, not `collapse`

Sticky positioning on table cells is unreliable with border-collapse: collapse in some browser rendering engines, because collapsed borders are shared between adjacent cells in ways that interact awkwardly with sticky's own layout calculations. This table uses border-collapse: separate; border-spacing: 0 and draws borders manually via border-bottom/border-right on individual cells instead, which keeps the sticky behavior consistent and predictable across browsers.

A real 4×14 matrix, not a toy example

Four plans (Free, Starter, Business, Enterprise) across 14 feature rows — from project and team limits through SSO, audit logs, uptime SLA, and monthly price — is dense enough that sticky-both-axes genuinely matters; a small 2×4 table wouldn't demonstrate the problem this pattern solves. The scroll container is capped with max-height and overflow: auto, so both scrolling axes are real, not simulated.

Customizing it

Add rows or columns freely — the sticky rules apply by element type (thead th, tbody th, .cmg-corner), not by index, so the layout keeps working at any size. Pair it with pricing feature table for a simpler, non-scrolling variant, or comparison table for a general-purpose base.