cómo anclar los encabezados en una tabla html desplazable

incorporando los encabezados de tabla fijos y los cuerpos de mesa desplazables pueden ser un requisito común en aplicaciones web en las aplicaciones web. . Sin embargo, encontrar una solución efectiva puede ser un desafío. Esta guía explorará la solución a este problema, guiándole a través de la implementación.

la solución

para lograr esta funcionalidad, puede utilizar una combinación de CSS y JavaScript técnicas. Una solución popular es emplear una técnica conocida como doble desplazamiento. Esto implica crear dos tablas anidadas: una tabla externa que contiene el encabezado fijo y una tabla interna desplazable para el cuerpo de la tabla.

css setup

Primero, defina el estilo CSS Para las tablas:

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}

JavaScript Setup

Siguiente, use JavaScript para ajustar la altura de la tabla de la tabla interna '); const innertable = document.getElementById ('Inner-Table'); // Calcule la altura de la tabla interna en función de la altura de la mesa exterior innerTable.style.height = `$ {outerTable.clientHeight - 100} px`;

const outerTable = document.getElementById('outer-table');
const innerTable = document.getElementById('inner-table');

// Calculate the inner table's height based on the outer table's height
innerTable.style.height = `${outerTable.clientHeight - 100}px`;

para un ejemplo de trabajo, consulte la siguiente muestra del código: