COMMENT FAIRE un tableau scrollable avec entêtes fixes en html/css sans js
La question est beaucoup posée sur le net, et faut avouer que les réponses partent en un peu dans tous les sens.
Beaucoup font tout scroller, entêtes compris; d'autres d'en remettent à Javascript, tellement il semble nécessaire de "dynamiser" html pour avoir ce comportement de scrolling pas vraiment prévu dans la conception originelle de la table HTML.
Les afficheurs HTML/CSS actuels sont pourtant bien capables de faire scroller un tableau avec entêtes fixes, faut juste leur demander gentiment.
Attention solution fonctionnelle sur un navigateur normal (comme FF), c'est à dire supportant CSS3 ! A adapter pour les autre navigateurs (ou pas).
Composer tout d'abord un tableau distinguant bien entête et corps : thead et tbody. La bordure html (crime lèse-styleur) est juste là pour visualiser le rendu des cellules.
| Nom | Ministère |
|---|---|
| JM Ayrault | Premier |
| L Fabius | A. Etrangères |
| V Peillon | Education |
| C Taubira | Justice |
| P Moscovici | Economie |
| M Valls | Intérieur |
Il suffit ensuite de passer entête et corps en bloc; cela transforme ces parties en éléments stylables - et donc scrollables : reste à contraindre la hauteur du tbody et lui dire de gérer le recouvrement vertical en scrolling. Le seul hic, c'est qu'en devenant 2 blocs, donc "indépendants" dans leur façon de gérer leur contenu en tout cas, les cellules perdent leur solidarité d'alignement vertical.
| Nom | Ministère |
|---|---|
| JM Ayrault | Premier |
| L Fabius | A. Etrangères |
| V Peillon | Education |
| C Taubira | Justice |
| P Moscovici | Economie |
| M Valls | Intérieur |
Pas grave, il suffit ensuite de "tailler" les cellules avec des largeurs identiques pour aligner à nouveau. Je vous laisse consulter le code source. J'ai utilisé les sélecteurs CSS3 pour retrouver les cellules par navigation sans avoir à les nommer, on peut peut aussi remplacer par de l'identification classique.
| Nom | Ministère |
|---|---|
| JM Ayrault | Premier |
| L Fabius | A. Etrangères |
| V Peillon | Education |
| C Taubira | Justice |
| P Moscovici | Economie |
| M Valls | Intérieur |
Cette solution a le GRAND AVANTAGE de ne pas "tuer la sémantique de votre html", bref de ne pas pourrir votre table; c'est capital, elle reste ainsi compatible avec tous les magnifiques décorateurs Javascript comme TableFilter pour lui ajouter filtres, tris et autres comportements dynamisme (cette fois ci!)
Le code source est... dans la page, tout simplement.
Commentaires
Je souhaite utiliser cette méthode pour rendre mon tableau scrollable. Cependant je ne souhaite pas fixer la largeur des cellule car j'aimerai qu'elles s'adaptent à leur contenu.
Comment puis-je faire ?
ta méthode est super mais comporte une lacune à laquelle je n'ai pas trouvé de solution :
Si la taille de ton texte dépasse la taille de ton champ, tu te retrouves très vite avec des colonnes qui ne sont plus droites du tout.
Si quelqu'un a une idée à fournir (mis à part un scroll dans chaque champ),
je suis tout ouïe.
Merci pour le partage de tes connaissances.
John