Cómo crear tablas desplazables con CSS y encabezados fijos

En el desarrollo web, a menudo es necesario crear tablas con grandes cantidades de datos que requiere desplazamiento. Sin embargo, mantener un encabezado fijo mientras se desplaza por el cuerpo de la tabla puede resultar un desafío. Así es como puede lograr este efecto:

Estructura HTML

Primero, debemos asegurarnos de que nuestra estructura HTML sea correcta. Tenemos un div externo con una barra de desplazamiento, un div interno que contiene la tabla y los encabezados de la tabla deben estar dentro de un elemento y los datos de la tabla dentro de un elemento

 
Estilos CSS
Ahora, necesitamos diseñar la tabla usando CSS:
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
Consideraciones adicionales
Asegúrese de que todos los encabezados y celdas de datos estén incluidos en los elementos 
 para una alineación adecuada. Si desea variar el ancho de las columnas, utilice el selector enésimo secundario en CSS.
Nota: Este enfoque es adecuado para tablas más pequeñas. Para tablas muy grandes, considere usar una técnica diferente, como la virtualización o una biblioteca de terceros.