Veuillez rendre les en-têtes de tableau fixes

Veuillez rendre les en-têtes de tableau fixes

• On rencontre souvent de grands ensembles de données ou des mises en page sous forme de tableau sur le web.
• Le problème apparaît lorsqu’on commence à faire défiler un tableau contenant des centaines de lignes.
• Lorsque l’en-tête du tableau disparaît, il devient difficile pour l’utilisateur de se souvenir à quoi correspond chaque colonne.

En-têtes fixes

• Les en-têtes fixes semblent magiques, mais leur mise en œuvre est très simple.
• Il suffit d’ajouter seulement deux propriétés CSS à thead :
  • position: sticky;
  • top: 0;
• Avec un taux de prise en charge d’environ 96 % dans le monde, sticky est pris en charge de manière fiable par de nombreux navigateurs.
• Cela contribue aussi à améliorer l’expérience utilisateur.

L’avis de GN⁺

• Lorsqu’un site web gère de grands tableaux, permettre à l’utilisateur de voir facilement le titre du tableau même en faisant défiler la page améliore grandement l’expérience utilisateur.
• Le fait de pouvoir fixer simplement l’en-tête du tableau à l’aide de la propriété CSS position: sticky; est une information utile pour les développeurs web.
• Comme cette fonctionnalité est largement prise en charge, les développeurs web peuvent l’implémenter de manière fiable sur différents navigateurs.

[GN⁺]

Avis Hacker News

• Les en-têtes fixes sur un seul axe sont possibles, mais on attend toujours le jour où le CSS prendra en charge les deux axes : lien vers l’issue GitHub
• J’ai réussi à créer des applications web fonctionnelles avec très peu de connaissances en CSS. Récemment, j’ai essayé de mettre en place un en-tête fixe sur un tableau de plus de 20 000 lignes, mais des effets de bord étranges apparaissaient malgré mes essais avec des classes Bootstrap, Stack Overflow, GPT et les suggestions de CodePen. Puis j’ai utilisé le CodePen de cet article, j’ai réglé le problème en deux minutes et je l’ai déployé en production. Merci.
• On pourrait croire qu’il est facile de figer l’en-tête d’un tableau avec position: sticky;, mais des problèmes apparaissent dès qu’on fait certaines opérations sur le contenu du tableau. Par exemple, j’ai ajouté une fonction qui restaure la position de défilement quand l’utilisateur fait défiler le tableau, quitte la page puis revient. La position restaurée se retrouve toujours décalée d’une ligne vers le bas. Quand on regarde à travers l’en-tête transparent du tableau, la ligne voulue est bien tout en haut, mais l’en-tête la recouvre et la ligne suivante devient la première visible. Ajuster la position de défilement en tenant compte de la hauteur de l’en-tête fonctionne au début, mais il y a parfois un décalage de quelques pixels. Comme le tableau est grand, je fais du chargement différé en fonction des événements de scroll, et comme j’utilise la mise en page automatique des tableaux, il arrive que les cellules d’en-tête deviennent trop étroites, que les mots passent à la ligne et que la hauteur totale de l’en-tête augmente. La solution finale a été de créer un ResizeObserver sur l’élément d’en-tête afin d’ajuster dynamiquement la position de défilement quand sa hauteur change. Documentation ResizeObserver
• Si vous voulez aussi fixer les bordures de l’en-tête du tableau, vous pouvez utiliser le code CSS suivant :

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• J’aimerais que les en-têtes de tableau deviennent fixes automatiquement. Si des développeurs font l’effort supplémentaire d’utiliser la balise <th>, il y a de fortes chances que ce soit le comportement qu’ils souhaitent.
• En ligne de commande, il vaut mieux envoyer les en-têtes vers l’erreur standard (stderr) et le corps vers la sortie standard (stdout). Sinon, lors d’un tri, les en-têtes peuvent se retrouver mélangés au résultat.
• Chrome empêchait autrefois l’utilisation de la propriété position: sticky sur les éléments <thead> et <tr> : lien vers l’issue Chromium
• Il est suggéré d’utiliser une hauteur de viewport limitée à la place d’un en-tête fixe, afin que l’en-tête reste toujours visible. C’est par exemple ce que fait DataGridXL : lien DataGridXL (l’auteur précise qu’il en est le créateur)
• Dans l’exemple CodePen, si l’on règle top en tenant compte de la bordure (par exemple 0 au lieu de -1px), on peut empêcher le corps du tableau de passer au-dessus de l’en-tête. Comparaison entre deux exemples CodePen : CodePen d’origine et CodePen amélioré
• Certains ont envie de dire : « S’il vous plaît, ne faites pas ça » : lien vers la discussion Hacker News