← All elements
<div class="tb"><table><thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead><tbody><tr><td>Ada</td><td>Engineer</td><td>Active</td></tr><tr><td>Lin</td><td>Designer</td><td>Away</td></tr><tr><td>Sam</td><td>Manager</td><td>Active</td></tr><tr><td>Noor</td><td>Analyst</td><td>Offline</td></tr><tr><td>Kai</td><td>Support</td><td>Active</td></tr><tr><td>Mia</td><td>QA</td><td>Away</td></tr></tbody></table></div>About this table
A scrolling table whose header row stays pinned using position: sticky on the th cells.
How it works
The table sits inside a box with a fixed height and overflow auto. Each header cell uses position: sticky with top: 0, so it stays pinned to the top of the scrolling box while the rows move underneath. Setting a background on the cells stops the rows showing through.
Ways to customise it
- Change the header background and text colours.
- Edit the box height to show more rows.
- Add more rows to the tbody.
Good to know
Real th elements keep the table accessible. Sticky on table cells is supported in current browsers. Make sure the sticky header has a solid background.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.