Persistent headers on HTML tables can be achieved using position:sticky CSS property on <thead> or <th> elements.
Creating table with fixed headers while page scrolling was once quite a complicated problem that was somehow achieved with Javascript. But now it can be achieved easily with 2 lines of CSS — positioning <th> as sticky.
th {
position: sticky;
top: 0;
}
Alternatively, <thead> can be specified sticky as well.
thead {
position: sticky;
top: 0;
}
Browser Compatability
Chrome & Edge (90+), Firefox and Safari support this.
HTML
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
</table>
CSS
th {
position: sticky;
top: 0;
}