Sticky Tables Can Lock Both Axes

Using position: sticky on table cells is a well-established pattern for keeping a header visible while scrolling through long datasets. The same principle applies to horizontal scrolling—cells can stick to the left edge of a container just as easily as they can stick to the top. With a bit of layering, it's possible to make a table that locks both its header row and its first column simultaneously.

That sort of bidirectional locking is useful when a table's purpose is cross-referencing: when both row and column labels carry context that must remain visible. A large table of team scores, for example, benefits from having the team names and inning numbers stay in view regardless of scroll direction. Not every table needs this treatment—smaller or simpler datasets can often be reflowed into card-style blocks on narrow screens—but for dense, label-driven data, a table that locks on both axes is a strong UI choice.

The Layering Challenge

The actual position: sticky declarations aren't where the difficulty lies. The challenge is handling overlap. A sticky cell that scrolls over other content needs a solid background or the content beneath will show through. It also needs correct z-index values so that the right cells end up on top as they move across one another.

For a table with both a sticky header and a sticky first column, three layers are required:

  • tbody>th cells must stack above normal table cells so they remain visible during a horizontal scroll.
  • thead>th cells sit above those, so the header stays on top during vertical scrolling.
  • Finally, the thead>th:first-child cell needs the highest stacking position of all—it overlays both the body cells and its sibling header cells while scrolling in either direction.

It's a small stacking-order dance, but once the background colors and z-index levels are set correctly, the effect works cleanly. The result is a table where both the top row and left column remain anchored, making it easy to keep track of what each cell represents no matter where you scroll.