Comment créer un tableau HTML défilant avec des en-têtes fixes ?

Comment ancrer les en-têtes dans un tableau HTML défilant

L'intégration à la fois d'en-têtes de tableau fixes et de corps de tableau défilant peut être une exigence courante dans les applications Web . Cependant, trouver une solution efficace peut s’avérer difficile. Ce guide explorera la solution à ce problème et vous guidera tout au long de la mise en œuvre.

La solution

Pour obtenir 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 de créer deux tableaux imbriqués : un tableau externe contenant l'en-tête fixe et un tableau interne déroulant pour le corps du tableau.

Configuration CSS

Tout d'abord, définissez le style CSS pour les tableaux :

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

Configuration JavaScript

Ensuite, utilisez JavaScript pour ajuster dynamiquement la hauteur de la table intérieure :

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`;

Exemple

Pour un exemple fonctionnel, reportez-vous à l'exemple de code suivant :

Cette solution gèle efficacement l'en-tête du tableau tout en permettant au corps du tableau de défiler en douceur. En mettant en œuvre ces techniques, vous pouvez créer des tableaux réactifs et interactifs qui répondent à vos exigences spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!