<div class="table-wrapper">
<table class="sticky-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr><td>Jane Doe</td><td>Developer</td><td>jane@example.com</td><td>Active</td></tr>
<tr><td>John Smith</td><td>Designer</td><td>john@example.com</td><td>Active</td></tr>
<tr><td>Sam Wilson</td><td>Manager</td><td>sam@example.com</td><td>Away</td></tr>
<tr><td>Alice Cooper</td><td>Support</td><td>alice@example.com</td><td>Offline</td></tr>
<!-- Add more rows to see effect -->
</tbody>
</table>
</div>
Back to Snippets
Sticky Table Header CSS
Keep your data readable with sticky table headers. The header row stays fixed at the top as users scroll down the list, so they never lose track of what each column represents.
493