Meridian
Recipe

Sticky Table Header

Keep column headers visible while scrolling through large datasets. Pure CSS with zero JavaScript overhead.

Implementation

NameRoleStatusJoined
User 1EngineerActive2024-01-15
User 2EngineerActive2024-02-15
User 3EngineerActive2024-03-15
User 4EngineerActive2024-04-15
User 5EngineerActive2024-05-15
User 6EngineerActive2024-06-15
User 7EngineerActive2024-07-15
User 8EngineerActive2024-08-15
User 9EngineerActive2024-09-15
User 10EngineerActive2024-010-15
User 11EngineerActive2024-011-15
User 12EngineerActive2024-012-15
User 13EngineerActive2024-013-15
User 14EngineerActive2024-014-15
User 15EngineerActive2024-015-15
User 16EngineerActive2024-016-15
User 17EngineerActive2024-017-15
User 18EngineerActive2024-018-15
User 19EngineerActive2024-019-15
User 20EngineerActive2024-020-15

Key CSS

thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

The sticky value pins the thead to the viewport top as the user scrolls. Works in all modern browsers without polyfills.

← Back to Docs

Meridian — design research for precision interfaces.