Comment puis-je conserver les en-têtes de tableau HTML fixes lors du défilement ?

Pouvez-vous conserver les en-têtes de tableau HTML fixes lorsque vous faites défiler ?

Les tableaux HTML sont un excellent moyen d'afficher des données tabulaires. Cependant, lorsque les tableaux sont longs, il peut être difficile de suivre les en-têtes de colonnes. Cela est particulièrement vrai si le tableau est large et que les en-têtes ne sont pas visibles à l'écran.

Une façon de résoudre ce problème consiste à figer les en-têtes de colonnes afin qu'ils restent visibles même lorsque le tableau défile. Ceci peut être réalisé en utilisant une variété de techniques CSS et JavaScript.

Transformations CSS

Si vous ne vous souciez que des navigateurs modernes, un en-tête fixe peut être obtenu beaucoup plus facilement en utilisant des transformations CSS. Voici comment cela fonctionne :

1. Ajoutez un écouteur d'événement au wrapper de la table. Cet écouteur sera déclenché lorsque la table défile.
2. Obtenir la valeur scrollTop du wrapper. Cette valeur représente le nombre de pixels sur lequel le tableau a défilé verticalement.
3. Appliquer une transformation de traduction à l'en-tête du tableau. Cette transformation déplacera l'en-tête vers le haut du même nombre de pixels que le défilement du tableau.

Voici le code JavaScript de cette technique :

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

Voici un exemple complet pour référence :

<div>

#wrap {
    width: 100%;
    height: 400px;
    overflow: auto;
}

th {
    width: 200px;
}

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

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!