Comment créer des en-têtes fixes dans des tableaux HTML à l'aide de transformations CSS ?

Tableau HTML avec en-têtes fixes ?

Avec les grands tableaux HTML, il devient difficile de référencer rapidement les lignes et les colonnes en raison de la page défilement. Il serait avantageux que les en-têtes de colonnes soient fixés en haut du tableau, à l'instar de la fonctionnalité « Figer les volets » dans Microsoft Excel.

Transformations CSS pour les navigateurs modernes

Pour les navigateurs modernes, les transformations CSS offrent une solution simple. Sans modifier le HTML ou le CSS existant, vous pouvez implémenter des en-têtes fixes avec seulement quatre lignes de code :

document.getElementById("wrap").addEventListener("scroll", function() {
  var translate = "translate(0," + this.scrollTop + "px)";
  this.querySelector("thead").style.transform = translate;
});

Ce code attache un écouteur d'événement de défilement à l'élément conteneur ("wrap" dans cet exemple) et dynamiquement met à jour la transformation CSS de l'en-tête du tableau ("thead") pour qu'elle corresponde à la position de défilement vertical du tableau. Cela garantit que les en-têtes restent fixes en haut du tableau tout en permettant au corps de défiler vers le bas.

Exemple complet

Vous trouverez ci-dessous un exemple complet démontrant cela. technique :

<div>

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!