Sticky Table Header

A table header that stays fixed while scrolling using position: sticky on <thead>.

Published May 20, 2026

Demo

Name	Role	Status	Joined
Alice Chen	Designer	Active	Jan 2023
Bob Torres	Engineer	Active	Mar 2023
Carol Kim	Manager	Pending	Jun 2023
David Park	Engineer	Inactive	Aug 2022
Eva Müller	Designer	Active	Nov 2023
Frank Liu	Analyst	Active	Feb 2024
Grace Obi	Engineer	Pending	Apr 2024
Henry Walsh	Manager	Inactive	Sep 2022

HTML
				
				<div class="table-scroll">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>Designer</td></tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

			

CSS
				
				.table-scroll {
  max-height: 240px;
  overflow-y: auto;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

			

How it works

position: sticky on <th> elements inside <thead> makes the header row stick to the top of its scrolling container. The top: 0 offset anchors it. A z-index is needed so the sticky header covers body rows as they scroll under it. The table must be inside a container with overflow-y: auto and a defined max-height for scrolling to engage.