Para fijar el encabezado de la tabla, debés separar tu encabezado y cuerpo usando los nodos <thead></thead>
y <tbody></tbody>
. Luego, aplicás una altura específica al cuerpo, y un overflow: auto;
en el css al tbody
, y listo. Cuidado con el tamaño del scroll en los navegadores como IE y Firefox, pues modificarán el ancho del elemento tbody
.
Te adjunto un ejemplo:
table {
width: 400px;
}
thead, tbody {
display: block;
width: 100%;
}
tbody{
max-height: 100px;
overflow-y: auto;
}
tbody tr, thead tr {
width: 100%;
}
tbody td, thead th {
width: 80px; /* Optional */
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
<th>Head 1</th>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
</tbody>
</table>