Discussion :

[laTayour]

Bonjour,


J’aimerai savoir si il est possible de fixer de fixer l’entête d’un tableau large.

C'est-à-dire prévoir deux ascenseurs horizontal et vertical pour défiler le contenus de tableau toute en ayant le header fixer a chaque fois.

[Poulpynette]

Bonjour,

Je ne vois pas bien où tu veux mettre des acsenceurs ... Dans chaque cellule ? Ou bien dans tout le reste de la table après le header ?

[HiRoN]

Salut,

C'est-à-dire prévoir deux ascenseurs horizontal et vertical pour défiler le contenus de tableau toute en ayant le header fixer a chaque fois.

Une petite recherche sur le forum devrait te donner des pistes de réflexions sur le sujet
Tu pourrais par exemple faire 2 tableau (1 pour l'entête, 1 pour le contenu), et encadrer le 2ème d'un div auquel tu définirais une hauteur / largeur et tu lui appliquerais un scroll:auto.

[Poulpynette]

J'y avais pensé mais en faisant ça, ça risque d'être compliqué de mettre face à face les entêtes et le contenu non ?

Et vu qu'apparemment, le souci de laTayour porte notamment au niveau de la largeur ...

Seul un scrolling vertical me semble cohérent.

[laTayour]

Salut,


Une petite recherche sur le forum devrait te donner des pistes de réflexions sur le sujet
Tu pourrais par exemple faire 2 tableau (1 pour l'entête, 1 pour le contenu), et encadrer le 2ème d'un div auquel tu définirais une hauteur / largeur et tu lui appliquerais un scroll:auto.

c'est un peu ce que j'ai fait au début, mais mon tableau est très large ce qui m'oblige a avoir aussi un scrollbar de défillement en largeure, le problème dans ce cas la, c'est que l'entête ne suit pas lors d'un défilement de droite ou a guache.

ce que j'ai fait ressemble un peu sa :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div classe="tableHeader" >
<table>
<tr>
	<th>	------ Ici le header de la table ---- </th>
</tr>	
</table>
</div>
<div classe ="TableBody" >
<table>
<tr>
	<td> -------  ici le body du tableau -------</td> 
</tr>
</table>
</div>

[Poulpynette]

C'est un peu le serpent qui se mord la queue

On est bien d'accord sur le fait que tes entêtes de tableau doivent rester en face du contenu correspondant => donc tu dois n'avoir selon moi qu'une seule table.
Et je n'ai pas vraiment de solution à te proposer autrement ... Désolée ...

Si tu veux garder 2 tables : tu dois spécifier exactement la même largeur pour chaque colonne de la table d'entêtes et sa correspondante de la table de contenu, afin que les deux restent en face.
Ensuite tu peux appliquer un scrolling dans la table du bas, mais uniquement vertical si tu ne veux pas perdre toute cohérence.

[laTayour]

Effectivement, c’est un peu le serpent qui se mord sa queue

Je pense un truc mais je ne sais pas si c’est faisable :

En gardant les deux tables, es qu’il y a un moyen de synchroniser le défilement vertical d’un tableau a l’autre.

C’est a dire le défilement de ma TableBody entraînera automatiquement le défilement de ma tableHeader

[HiRoN]

Tu peux peut-être t'inspirer de ce qui a était fais ici, ici ou ici

[laTayour]

merci a tous,

j'ai trouvé une sollution pour synchroniser le défillement entre les deux div, je n'ai pas encor rafiner mon code mais voila ce que j'ai trouvé si sa intéresse quelqu'un :

ICI

[Poulpynette]

merci a tous,

j'ai trouvé une sollution pour synchroniser le défillement entre les deux div, je n'ai pas encor rafiner mon code mais voila ce que j'ai trouvé si sa intéresse quelqu'un :

ICI

Ça marche sur tous les navigateurs ?

Ça m'a l'air spécifique de IE ... Et si c'est le cas :

^^