Maison >interface Web >js tutoriel >Comment puis-je geler les en-têtes de tableaux HTML à l'aide de CSS et JavaScript ?

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

Barbara Streisandoriginal: 2024-12-09 00:06:13296parcourir

How Can I Freeze HTML Table Headers Using CSS and 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 :

 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 :

 var traduire = "translate(0", this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translation;<br>});

 Votre conteneur existant </em>/</p><h1>envelopper {</h1><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ CSS pour la démo /
td {

background-color: green;
width: 200px;
height: 100px;

}

<pre class="brush:php;toolbar:false"><table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
    </tbody>
</table></p>
<p></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!

JavaScript css html for using class var this position transform column table td microsoft excel Translate

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment l'héritage JavaScript affecte-t-il la propriété Constructor et l'opérateur « instanceof » ?Article suivant：Comment l'héritage JavaScript affecte-t-il la propriété Constructor et l'opérateur « instanceof » ?

Articles Liés

Voir plus