[HTML] probleme de tableau entre firefox et IE

**Pe04** · 11/04/2006, 09h20

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 :

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

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...

**blueice** · 11/04/2006, 10h12

Et en précisant les dimensions Hauteur et Largeur ?

**Pe04** · 11/04/2006, 10h15

comment ca ? je lui indique la hauteur... c tout...

**blueice** · 11/04/2006, 10h17

As tu essayé de lui indiquer la largeur aussi ?

**Pe04** · 11/04/2006, 10h22

oui, mais ca ne change rien... le plus marrant c'est que ca marche très bien sur firefox...

**10-nice** · 11/04/2006, 10h59

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...

**Pe04** · 11/04/2006, 11h17

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...

**franculo_caoulene** · 11/04/2006, 11h48

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

**Pe04** · 11/04/2006, 11h55

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...

**Pe04** · 11/04/2006, 12h47

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 :

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

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...

**franculo_caoulene** · 11/04/2006, 12h49

Ca te dérange de fixer la largeur des cellules du tableau?

**Pe04** · 11/04/2006, 12h58

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.

**franculo_caoulene** · 12/04/2006, 12h52

Je viens de trouver ça : http://www.cssplay.co.uk/menu/tablescroll.html

**Pe04** · 12/04/2006, 13h04

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...

**franculo_caoulene** · 12/04/2006, 13h19

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  

**Pe04** · 12/04/2006, 14h30

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 ?

**franculo_caoulene** · 12/04/2006, 14h46

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]

**Sandkura** · 17/06/2009, 16h26

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 :

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

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 ?

[HTML] probleme de tableau entre firefox et IE

HTML

Discussions similaires

Partager

Partager