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

Tableau HTML avec en-têtes fixes

Énoncé du problème

Créer un tableau HTML où les en-têtes de colonnes restent fixes à l'écran lorsque vous faites défiler le contenu du tableau. Cela imite la fonctionnalité « Figer les volets » dans Microsoft Excel.

Solution pour les navigateurs modernes

À l'aide des transformations CSS, la correction de l'en-tête est simple pour les navigateurs modernes :

1. Définissez la propriété "transform" pour le "thead" de la table element.
2. Traduire par la valeur scrollTop actuelle.
3. Écouter l'événement "scroll" sur l'élément conteneur ("#wrap").

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

Support et exemple

Les transformations CSS sont largement prises en charge, à l'exception d'Internet Explorer 8-.

Voici l'exemple complet :

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

#wrap {
  overflow: auto;
  height: 400px;
}

td {
  background-color: green;
  width: 200px;
  height: 100px;
}

<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!