Comment puis-je geler les en-têtes de tableaux HTML à l'aide de CSS et JavaScript ?

Techniques CSS et JavaScript pour les en-têtes de tableaux HTML fixes

La possibilité de figer les en-têtes de colonnes dans un tableau HTML, comme indiqué dans Microsoft La fonctionnalité « Figer les volets » d'Excel est hautement souhaitable pour les tableaux étendus. Il existe plusieurs techniques multi-navigateurs qui peuvent obtenir cet effet en utilisant CSS ou JavaScript.

CSS Transform Technique

Pour les navigateurs modernes, les transformations CSS offrent une solution simple et solution efficace :

<pre class="brush:php;toolbar:false"> var translation = "translate(0", this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translation;<br>});<br>

Ce code écoute les événements de défilement sur le conteneur du tableau et traduit l'en-tête du tableau (thead) en fonction de la position de défilement.

Avantages du CSS Technique de transformation :

• Code minimal (quatre lignes)
• Aucune dépendance externe
• Fonctionne avec diverses configurations de table (mise en page de table)
• Prend en charge tous les principaux navigateurs sauf Internet Explorer 8-

Exemple d'implémentation :

<pre class="brush:php;toolbar:false"> var traduire = "translate(0", this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translation;<br>});
<pre class="brush:php;toolbar:false"> Votre conteneur existant /<h1 id="envelopper">envelopper {</h1><pre class="brush:php;toolbar:false">overflow: auto; height: 400px;

}

/ CSS pour la démo /
td {

<pre class="brush:php;toolbar:false">background-color: green; width: 200px; height: 100px;

}

<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

Foo	Bar

”

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!