Si continuamos usando html y css, sin recurrir a javascript ni librerías adicionales, para fijar la cabecera de una tabla html, quizás lo más sencillo sea aplicar un "position" adecuado (fixed o sticky) a la cabecera mediante css, como se ilustra en el siguiente ejemplo:
<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
padding: .5em .5em .5em 0em;
}
td {
background-color: #eee;
overflow: hidden;
white-space: nowrap;
}
th {
background-color: #222;
color: white;
padding: 2px;
position: -webkit-sticky;
position: sticky;
top: 2px;
}
</style>
<div id="cabecera">Cabecera</div>
<table>
<thead>
<tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
</thead>
<tbody>
<tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
<!-- ... Replicar líneas para ver efecto ... -->
</tbody>
</table>
Saludos.
<!-- Ejemplo cabecera de tabla html fija usando position de CSS -->
<style>
#cabecera {
padding: .5em .5em .5em 0em;
}
td {
background-color: #eee;
overflow: hidden;
white-space: nowrap;
}
th {
background-color: #222;
color: white;
padding: 2px;
position: -webkit-sticky;
position: sticky;
top: 2px;
}
</style>
<div id="cabecera">Cabecera</div>
<table>
<thead>
<tr><th>Título 1</th><th>Título 2</th><th>Título 3</th></tr>
</thead>
<tbody>
<tr><td>Contenido 1 - 0123456789</td><td>Contenido 2 - 0123456789</td><td>Contenido 3 - 0123456789</td></tr>
<!-- ... Replicar líneas para ver efecto ... -->
</tbody>
</table>