Comment ancrer des en-têtes dans une table HTML Scrollable

Incorporer les deux en-têtes de table fixe et les corps de table de défilement peuvent être une exigence commune dans les applications Web . Cependant, trouver une solution efficace peut être difficile. Ce guide explorera la solution à ce problème, vous guidant à travers l'implémentation.

La solution

pour réaliser cette fonctionnalité, vous pouvez utiliser une combinaison de CSS et javascript techniques. Une solution populaire consiste à utiliser une technique connue sous le nom de double défilement. Cela implique la création de deux tables imbriquées: une table extérieure contenant l'en-tête fixe et une table intérieure de défilement pour le corps de la table. Pour les tableaux:

/ * Table extérieure (en-tête fixe) * / # Tableau extérieur { Largeur: 100%; hauteur: 100px; / * Réglez une hauteur fixe pour l'en-tête * / débordement: caché; } / * Tableau intérieur (corps de défilement) * / # table intérieure { hauteur: calc (100% - 100px); / * Calculez la hauteur en fonction de la hauteur de la table extérieure * / débordement-y: faites défiler; }

Configuration javascrip '); const inertable = document.getElementById ('inner-table'); // Calculez la hauteur de la table intérieure en fonction de la hauteur de la table extérieure innertable.style.height = `$ {outerTable.ClientHeight - 100} px`;

/* 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;
}

pour un exemple de travail, reportez-vous à l'exemple de code suivant: [

Cette solution gèle efficacement l'en-tête de la table tout en permettant au corps de la table de faire défiler en douceur. En implémentant ces techniques, vous pouvez créer des tables réactives et interactives qui répondent à vos exigences spécifiques.