En-têtes fixes sur un tableau HTML à cellules de taille variable

Ça ressemble à un cas d’école pour un intégrateur et ça m’a trotté dans la tête pendant un moment pour le tableau des sorts de Wiz’n’Liz je présente donc ici mes conclusions.

Le contexte

Toute la difficulté réside dans la nécessité de respecter la méthode d’affichage par défaut des tableaux, comprendre table-layout: auto, qui donne aux cellules une taille proportionnelle au contenu de celles-ci et dessine les lignes et colonnes du tableau en se basant sur la taille des plus grandes cellules.

Ma solution

Ironiquement, la solution que j’ai trouvée passe par enlever au tableau son caractère dynamique puisque l’on doit fixer la taille des cellules en-têtes. Ceci car sortir une partie (thead, par exemple) des nœuds de son contexte changerait sa taille (puisqu’ils seraient désormais indépendants de tout autre cellule).

Ensuite il est important de préciser qu’il est impossible de faire ça uniquement en CSS puisqu’il faut au minimum que les en-têtes bougent en fonction du déplacement des barres de défilement de façon à ce qu’elles correspondent toujours à leurs lignes et colonnes. À partir de là :

• Soit on essaye quand même de tirer un peu partie du position: fixed calculé par le navigateur, ce qui implique de déplacer (comprendre copier, insérér et supprimer/cacher l’original) le tableau dans une iframe ce qui pose, au passage, d’autres problèmes que j’évoquerais plus tard.
• Soit on utilise la propriété overflow: scroll sur un conteneur et on émule la propriété position: fixed.

Personnellemnt je retiens la seconde solution, plus simple, plus propre et mieux intégrée à mon goût. La première m’a cependant permis de tomber sur le mystère du vertical-align: middle dans un bloc en position: fixed dans une iframe.