Skip to main content
Ejemplo
Origen Enlace
Niche
  • 1.4k
  • 7
  • 15

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>

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.

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>

Origen Enlace
Niche
  • 1.4k
  • 7
  • 15

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.