Tuto : créer un tableau HTML avec une première ligne fixe avec CSS et JQuery

Lorsqu’un tableau HTML est long, il est utile de pouvoir bloquer la première ligne afin de l’avoir visible lorsqu’on parcourt son contenu. On utilisera pour cela des balises HTML très peu usitées, et qui ont donc conservé une aura de mystère : THEAD et TBODY. Il suffit de leur appliquer un peu de CSS pour bloquer l’une et scroller l’autre. Démonstration :

<table class="tableau">
<thead>
<tr>
<th>... Mes en-têtes ...</th>
</tr>
</thead>

<tbody>
<tr>
<td>... Mes données ... </td>
</tr>
</tbody>
</table>

On applique à ce balisage basique le formatage suivant :

<style>
thead {
height:50px;
}

tbody {
height:500px;
overflow:auto;
}
<style>

Voici un exemple du résultat obtenu. Le tableau a une hauteur maximale de 550 et quelques pixels, l’en-tête en occupe 50, et le corps se débrouille avec une scrollbar pour faire défiler les lignes.

Et si je veux pas avoir deux scrollbars ?

Evidemment, à cause de la hauteur fixe de l’en-tête, le tableau a une hauteur totale absolue en pixels. Du coup si mon écran est trop petit, j’aurai deux scrollbars ; s’il est trop grand, j’aurai du vide en dessous. Comment donc faire pour que mon tableau occupe tout l’écran et ne laisse qu’une seule scrollbar pour les lignes ?

C’est ici qu’intervient Javascript, en l’occurrence jQuery, qui permet des redimensionnements en un coup de cuiller à pot. Tous les éléments jQuery possèdent une propriété width(), height() et un événement resize(). Il suffit donc d’écouter les événements resize() de la fenêtre principale et d’adapter les dimensions du TBODY à celles de la fenêtre :

<script>
$(document).ready(function() {
    $(window).resize(function() {
        $('tbody').css('height',($(window).height() - 70) + 'px');
    }).resize();
});
</script>

A chaque redimensionnement de la fenêtre, le TBODY prendra sa hauteur moins 70 pixels (50 pixels de THEAD + 10 pixels de marge haute et basse sur le BODY).

Vous noterez que l’événement resize() est chaîné une deuxième fois, sans argument, après la définition du callback. Ceci sert à déclencher l’événement au chargement de la page. En effet lorsqu’un événement est appelé sans argument, jQuery déclenche cet événement et exécute sa fonction de callback. Voyez un exemple interactif : amusez-vous à redimensionner la fenêtre : le tableau reste dans les limites de la page sans générer de scrollbar droite.

Et voilà ! C’était pas plus compliqué !

NB : Il va de soi que ce comportement ne fonctionne pas avec Internet Explorer 6, qui ignore bêtement le style appliqué au tbody, mais j’ai envie de dire : « qui s’en trouverait marri ? »

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

5 réponses à Tuto : créer un tableau HTML avec une première ligne fixe avec CSS et JQuery

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *