Existe-t-il une technique CSS/JavaScript pour afficher un long tableau HTML de telle sorte que les en-têtes de colonnes restent fixes à l'écran et que la première colonne reste fixe et défile avec les données.
Je veux pouvoir faire défiler le contenu du tableau, mais toujours pouvoir voir les en-têtes de colonne en haut et la première colonne à gauche.
S'il existe un plugin jQuery, ce serait génial ! Si cela peut aider, le seul navigateur qui m'intéresse est Firefox.
Exemple de travail lien posté par pranav :
http://jsbin.com/nolanole/1/edit?html,js,output
Pour information : testé avec IE 6, 7 et 8 (mode de compatibilité activé ou désactivé), FF 3 et 3.5, Chrome 2. Pas adapté aux lecteurs d'écran (les en-têtes ne font pas partie du tableau de contenu).
EDIT 5/5/14 : l'exemple a été déplacé vers jsBin. C'est vieux, mais étonnamment cela fonctionne toujours dans les versions actuelles de Chrome, IE et Firefox (bien qu'IE et Firefox puissent nécessiter quelques ajustements à la hauteur des lignes).
Le lien vers la bibliothèque jQuery hébergée sur jQuery.com a changé, et leur redirection était incorrecte... ce qui fait qu'elle ne fonctionne plus dans TOUS les navigateurs. J'ai corrigé le lien pour qu'il pointe vers le fichier hébergé sur les serveurs de Google, ce qui devrait être plus fiable.
Je vois ici, bien qu'il s'agisse d'une vieille question, un bon endroit pour ajouter mon propre script :
http://code.google.com/p/js-scroll-table-header/
Il fonctionne sans aucune configuration et est vraiment facile à mettre en place.
Si vous souhaitez que les en-têtes restent en place tandis que les données du tableau défilent verticalement, vous devez mettre en place un <tbody> stylé avec "overflow-y : auto" comme ceci :
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>Si le contenu du <tbody> dépasse la hauteur souhaitée, il commencera à défiler. Toutefois, les en-têtes resteront fixes en haut, quelle que soit la position du défilement.
Serait-il possible de faire deux colgroups et de donner au second un overflow:auto, afin d'obtenir une première colonne fixe ?
Cette réponse contient également la meilleure réponse que j'ai trouvée à votre question :
Tableau HTML avec en-têtes fixes ?
et sur la base d'un CSS pur .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
Dup. partiel : stackoverflow.com/questions/673153/
2 votes
Il ne semble pas y avoir de doublon car cette question nécessite également une colonne fixe.
5 votes
J'ai voté pour la réouverture de cette question par principe. Des douzaines de votes positifs et de favoris, apparemment quelqu'un le trouve utile. Oui, il faut une longue réponse. C'est à cela que servent jfiddle et d'autres outils similaires.
0 votes
@KickingLettuce Popularité !== sur le sujet. Si la question est rouverte, elle sera simplement fermée à nouveau.
1 votes
Google m'a amené à cette question dès mes premières recherches, mais les réponses sont dépassées et peu satisfaisantes. J'ai finalement trouvé la réponse ici : stackoverflow.com/a/50516259/982107
1 votes
Je ne vois pas pourquoi cette question est fermée. Le problème est clairement défini. La question devrait accepter des réponses avec des techniques potentiellement plus modernes.