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

  1. lewasabi dit :

    Cette technique est génial, et facile à trouver, mais ne fonctionne que sous FF …

  2. Thaz dit :

    Ne marche pas sous IE… Quel intérêt ?

  3. Thaz dit :

    « qui s’en trouverait marri ? » : tous les développeurs dont les clients (idiots) demandent une compatibilité IE6… Donc 90% des clients…

  4. Le Caphar dit :

    @Thaz : deux intérêts :
    – si tu as des visiteurs qui sont tous équipés d’un navigateur récent (interface d’admin de site, par ex.). Dans ma boîte tout le monde a Firefox et je fais des applis sur l’intranet. Personne ne souffre.
    – tu offres un service à tous les clients équipés d’un navigateur compatible, sans dégrader l’expérience des autres (le tableau reste consultable sur IE). C’est le « progressive enhancement ».

    En outre j’ai constaté que IE 6 ne représentait plus que 10% des visites sur nos sites. Beaucoup de « gros » sites (Yahoo, etc) ont déjà cessé de développer leurs interfaces avec le même niveau de fonctionnalité pour ce navigateur historique.

  5. donald dit :

    alors ca marche pas sous ie9/firefox4/chrome…

    link to lepotlatch.org

Laisser un commentaire

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