[HTML] probleme de tableau entre firefox et IE

Version imprimable

Bonjour,

Je développe un site internet en PHP, par habitude j utilise firefox...
J'ai un tableau d'une taille fixe (environ height="500") un entète, un pied de tableau et un corps... en fonction du nombre de lignes que j'ai dans une base de donnée, j'ai une scrollbar qui apparait et qui me permet de visualiser toutes les lignes de mon tableau sans pour la peine avoir l'entète et le pied qui se déplace. en bref, j'ai la première ligne et la dernière qui sont fixe et la scrollbar me permet de visualiser les autres lignes entre... Tout ce qui y a de plus banale... Donc jusqu'ici tout va bien... mais lorsque mon tuteur ma dis qu'il ne connaissai pas firefox et qu'il n'utilise IE 6... J'ai du donc prevoir mon développement pour ces 2 navigateurs...

Gros souci, le tableau n'est plus fixe... en bref plus de scrollbar... quand j'ai 100 lignes dans ma Base, j'ai les 100 lignes qui s'affiche à la suite. alors que sur firefox, j'ai 20 lignes qui s'affiche et je me balade avec ma scrollbar...

Pourquoi j'ai se souci, et que dois je faire pour le regler ??

Voici un exemple du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <table> <thead> <tr><th>head lol</th></tr> </thead> <tfoot> <tr><th>foot lol</th></tr> </tfoot> <tbody style="overflow:auto;" height="100"> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> <tr><td>lol</td></tr> </tbody> </table>
Merci d'avance...

11/04/2006, 09h12
blueice

Et en précisant les dimensions Hauteur et Largeur ?
11/04/2006, 09h15
Pe04

comment ca ? je lui indique la hauteur... c tout...
11/04/2006, 09h17
blueice

As tu essayé de lui indiquer la largeur aussi ? :roll:
11/04/2006, 09h22
Pe04

oui, mais ca ne change rien... le plus marrant c'est que ca marche très bien sur firefox...
11/04/2006, 09h59
10-nice

y a moyen d'avoir le meme rendu en rusant un peu avec trois tables et une div.

La première table pour l'entete (ou plusieurs div en float left dans un conteneur), une div avec ta table de données dedans en mettant cette div avec hauteur et largeur fixe et la propriété overflow à scroll. et une table ou plusieurs div pour le footer. Par contre la gestion différente des bordures entre IE et FF obligera surement à du hack css pour un rendu égal sur les deux navigateurs...
11/04/2006, 10h17
Pe04

ouai, j'ai déjà tester cette solution, mais j'ai un problème avec la largeur des cellules des headers, body et foot...

j'ai récuperer un source avec une feuille de style... et ca fonctionne... ce que je ne comprend pas trop, c'est que j'ai fait a peu prèt la meme chose... mais bon..., je vais garder cette solution... et puis je verrais bien...
11/04/2006, 10h48
franculo_caoulene

T'as la solution à nous donner? Le forum sert surtout d'abord de base de connaissance, ça peut être utile pour les futures recherches.
11/04/2006, 10h55
Pe04

euh je sais. Mais la je fai des testes... pour pas vous envoyer des erreurs... parcequ'y a des modifications a faire en fonctions du navigateurs.... donc je teste et ensuite je vous enverrais ce que je pense etre juste...
11/04/2006, 11h47
Pe04
Après pas mal de teste... j'arrive a une solution assez correcte, pas parfaite, mais correcte...

Donc pour avoir un code identique sur firefox et ie :

j'utilise une feuille de style qui pour ie permet de fixer l'entete :
Code:

1 2 3 4 thead.fixedHeader tr{ position: relative; top: expression(document.getElementById("tableContainer").scrollTop); }
Ceci ne fonctionne pas avec firefox... Donc vu que je n'arrive toujours pas a avoir le meme resultat aussi bien sur ie que sur firefox... j abandonne, de toute facon, personne dans la boite a part moi connai firefox, lol...
11/04/2006, 11h49
franculo_caoulene

Ca te dérange de fixer la largeur des cellules du tableau?
11/04/2006, 11h58
Pe04

euh, oui et non... c'est juste parce que je ne sais jamais combien j'ai de champ a afficher et je prefère que la scrollbar horizontal soit sur la fenètre du navigateur... je sais pas trop comment lexpliquer...

et en fait je la fixe parfois mais directement sur le tableau et non dans la feuille css.
12/04/2006, 11h52
franculo_caoulene

Je viens de trouver ça : http://www.cssplay.co.uk/menu/tablescroll.html
12/04/2006, 12h04
Pe04

je l'avais trouvé aussi... Si je me souviens bien, chaque partie est un tableau... donc en visuel on a un seul tableau mais en vrai c'est 3 tableaux différents... je ne vois pas trop comment les cellulles peuvent t avoir la meme tailles... imaginons que je les fixe toutes à 50 (nombre purement arbitraire)... et que ma chaine de caractère dans ma base est plus grande, la cellule correspondante s'agrandie ainsi que toute les cellules du meme tableau... donc si c'est 3 tableau différents ca ne suivra pas...
12/04/2006, 12h19
franculo_caoulene

Ta chaîne de caractères sera rarement : aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
qui déforme la cellule, si tu définis une taille, le texte ira à la ligne quand il y aura un espace. Evidemment, il ne faut pas utiliser de  
12/04/2006, 13h30
Pe04

Ok, Mais mon site sert a afficher des informations rentré par des utilisateurs différents... et j'ai deja vu certaines personnes insérer des _ à la place d'espace...

Mais bon, c'est vrai que c'est surement mieu, sinon cette solution fonctionne correctement pour les 2 navigateur ?
12/04/2006, 13h46
franculo_caoulene

Bah teste par toi même le lien dans les deux navigateurs...!

[edit] pas de "c vrai" dans le forum s'il te plaît [/edit]
17/06/2009, 15h26
Sandkura

foot
Citation:
Envoyé par Pe04

Après pas mal de teste... j'arrive a une solution assez correcte, pas parfaite, mais correcte...

Donc pour avoir un code identique sur firefox et ie :

j'utilise une feuille de style qui pour ie permet de fixer l'entete :

Code:

1 2 3 4 thead.fixedHeader tr{ position: relative; top: expression(document.getElementById("tableContainer").scrollTop); }

Ceci ne fonctionne pas avec firefox... Donc vu que je n'arrive toujours pas a avoir le meme resultat aussi bien sur ie que sur firefox... j abandonne, de toute facon, personne dans la boite a part moi connai firefox, lol...
Et comment ca marche pour fixer le pied de page ?