Comment conserver les en-têtes de tableau fixes lors du défilement du corps en HTML à l'aide de CSS et JavaScript ?

Existe-t-il une technique CSS/JavaScript multi-navigateurs pour afficher un long tableau HTML de telle sorte que les en-têtes de colonnes restent fixes à l'écran et ne défilent pas avec le corps du tableau ?

Dans Microsoft Excel, nous utilisons souvent la fonctionnalité « Figer les volets » pour maintenir les en-têtes de colonnes stables pendant que nous faisons défiler le contenu du tableau. Existe-t-il une technique multi-navigateur similaire en HTML ?

En utilisant les transformations CSS, cela peut être fait avec seulement quatre lignes de code JavaScript :

1. Enveloppez votre table dans un conteneur avec le ID "wrap" et définissez sa propriété de débordement sur "auto".
2. Écoutez l'événement "scroll" sur le conteneur.
3. Dans le gestionnaire d'événements, calculez la valeur de traduction en fonction de la propriété scrollTop.
4. Appliquez la valeur de traduction calculée à l'élément thead de la table à l'aide de la propriété transform.

Cette approche présente les avantages suivants :

• Propre et efficace, utilisant seulement quatre lignes de JavaScript.
• Aucune dépendance JavaScript externe.
• Fonctionne avec toutes les configurations de tableau, y compris la mise en page fixe.
• Prend en charge les navigateurs modernes, notamment Chrome, Safari, Firefox et Edge.

Voici le code :

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

Ci-dessous un exemple complet pour référence :

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

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

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

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