Comment conserver les en-têtes de tableau fixes lors du défilement avec CSS ?

Sticky CSS pour l'en-tête de tableau - Chrome, FF, Edge

Lorsque vous avez un tableau dans lequel les données contenues dans le corps du tableau peuvent déborder et que vous souhaitez que l'en-tête du tableau pour rester visible, vous pouvez utiliser CSS. Une solution simple qui ne nécessite qu'un peu de CSS sans JavaScript nécessite l'utilisation de position: sticky et la définition appropriée de la propriété top.

L'exemple ci-dessous utilise une classe de table de tableFixHead pour garantir que la table s'adapte à l'intérieur de ce conteneur qui est configuré pour déborder : auto. Cela permettra au corps de la table de déborder à l'intérieur du conteneur tandis que l'en-tête reste stationnaire.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

À l'intérieur de la table elle-même, vous pouvez voir que les éléments de la tête de table sont maintenant mis en position : collant . Cela signifie que lorsqu'ils atteignent le haut du conteneur, ils resteront collés au haut du conteneur au lieu de défiler avec le reste des données.

<div>

Si vous deviez reproduire cet exemple, vous le feriez voyez que l'en-tête reste stationnaire lors du défilement, permettant à l'utilisateur de voir facilement les noms de colonnes des données du tableau.

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!