En tête de tableau fixe.

Bonjour à tous,

N'ayant pas trouver de solution pour rendre l'en tête d'un tableau fixe j'ai séparé la premiere ligne avec le <th> du reste du tableau avec les <td>.

J'ai donc 2 <div> avec chacune leur table dans la première les <th> et dans la seconde les <td>.
Et j'ai mis un ovreflow auto et un height pouur la seconde <div>.
cela fonctionne puisque seul le tableau se deplace dans sa <div> et l'en-tête reste fixe dans sa <div>.

J'aimerai savoir s'il existe un solution plus adequat, car cette solution a un point faible, la taille des cellules du tableau?

Et si pas miracle cette solution est la meilleure (ben oui ça serait un miracle que j'ai trouvé la meilleure solution :yaisse2: ) existe-t-il un moyen de gérer la taille des cellules?

Merci d'avance.

Bonjour,

Non, je ne pense pas que ce soit la meilleure solution je te rassure, car comme tu l'as dit, c'est très limité ;)

Ensuite, si tu veux une solution, faudrait expliquer ce que tu entends par "gérer la taille des cellules" ou ce que tu veux faire précisément.

Le plus simple c'est que je vous donne les liens de mon site.
Donc sur les classement il peut parfois y avoir plusieurs milliers de lignes.
Et lorsqu'il y a 4 ou 5 colonnes ça va on se souvient à peu près à quoi elles correspondent mais lorsqu'il 8 ou 9 la ça se complique donc je voudrais avoir l'en-tête du tableau ou la ligne de titres comme vous voulez qui reste fixe.

Donc voila un tableau avant que je fasse des modifs:
http://forumdarts.free.fr/doublette09.html
Et maintenant un autre tableau avec les modifs:
http://forumdarts.free.fr/equipe04-05.html

Alors dans le tableau avec les modifs j'ai été obligé de mettre une largeur aux balises th et td pour que cela corresponde à peu près et ayant pourtant la même valeur il y un décalage...
Donc ce que je souhaiterai c'est la même chose que dans le premier lien mais avec la ligne de titre fixe!

Voili voilou.

Les données de ton deuxième tableau étant de longueur variable, il va être difficile d'avoir à coup sûr des entêtes parfaitement alignées avec tes résultats.

Ce que je veux dire par-là, c'est que tu ne pourras pas imposer une largeur fixe à tes cellules si leur contenu est plus grand en largeur.

Le mieux pour cela est de n'utiliser qu'un seul tableau à ma connaissance ...

Mais peut-être quelqu'un pourra-t-il te donner une meilleure solution.

on peut faire ce genre de chose <td class="xxx"> et dans le css .xxx{width; 150px; par exmple?
De cette façon je pourrai mettre une largeur fixe à chaque colonne en prenant garde à ce que cette largeur soit légérement supérieure au contenu de la plus grande cellule?

Si tu connais à l'avance la taille du contenu des cellules : oui, tu peux ta baser sur la cellule la plus large.

Par exemple, si tu imposes width: 150px en CSS, ta cellule fera 150px de large, sous réserve que le contenu ne fasse pas plus.

Mais dans le cas contraire, tu ne pourras pas imposer la largeur d'une cellule de table si le contenu est trop grand. Elle s'étirera par défaut.

Cette solution me paraît un peu acrobatique mais bon, si tes données sont fixes, cela peut marcher.

En fait c'est assez simple,

Puisque la première colonne classement aura toujours la même largeur celle du titre, pour les moyennes c'est pareil la seule cellule qui varie finalement c'est celle du nom des équipes/doublettes/joueurs donc la il me suffit de mettre une valeur assez grande et ça devrait le faire je vais tester ça ;)

Si cette solution te va, tant mieux, mais c'est un peu du bricolage et à terme, si le contenu change, ce sera pénible à maintenir ...

Au cas où cela t'intéresserait, une autre solution plus propre peut-être consisterait à mettre en place une sorte de scrolling virtuel.

Je m'explique : tu fixes un nombre de résultats max par page, des boutons (flèches) cliquables pour accéder aux résultats suivants ou précédents.
Mais là il te faut un langage tel que le Php voire même une base de données (sauf si tes données sont fixes, une simple liste suffit).

Comme je le disais seul le contenu des pages des classements de la saison en cours changent, donc au max 3 pages.
Et sur ces pages seulement la colonne du nom peut varier en largeur donc il me suffirait de modifier cette largeur dans le css en rajoutant quelques px.
Donc en conclusion à mettre en place ça va être un peu fastidieux car il va falloir tatoner pour trouver les valeurs justes mais ensuite ça devrait aller, je teste et je vous donnerai mon avis sur le résultat ;)

Et bien voila il ne reste plus qu'a peaufiner mais le résultat est plutôt satisfaisant. En tout cas il me suffit amplement et de plus je me suis apperçu que le nombre maximum de caractère par cellule était de 25 donc avec 220px de large et un em à 0.8 ça passera toujours donc aucune modification à apporter ultérieurement ;)

Voili voilou!!!

Citation:

---

Envoyé par Icedarts

Et bien voila il ne reste plus qu'a peaufiner mais le résultat est plutôt satisfaisant. En tout cas il me suffit amplement et de plus je me suis apperçu que le nombre maximum de caractère par cellule était de 25 donc avec 220px de large et un em à 0.8 ça passera toujours donc aucune modification à apporter ultérieurement ;)

---

As-tu testé en changeant la résolution ? ;)

Oui et à part le fait qu'il y a une scrollbarre horizontale il n'y a pas de décalage qui perturbe le tableau , mais bon qui est en 800x600 de nos jours ;)