Entête de tableau fixe sous IE

Entête de tableau fixe sous IE - HTML/CSS - Programmation

Marsh Posté le 28-07-2005 à 10:07:15    

Bijours,  
 
je suis en train de me demnder comment faire pour avoir des entêtes de tableau fixe sous Internet explorer, c'est à dire qu'on est toujours l'entête du tableau à l'écran, et les colonnes qu défilent via une scroolbar. Car quand il y a peu de donnée dans le tableau, ça va...mais quand il y en a beaucoup, il faut réussir à ce repérer sur les colonnes. Elles ont déjà un repère de couleur mais ça ne suffit pas. :(  
 
Exemple qui marche sous FireFox (mais pas sous IE 5.5 :sweat: )
 

Code :
  1. <style type="text/css">
  2. tbody {
  3.       overflow: auto;
  4.       height: 100px;
  5. }
  6. </style>
  7. </HEAD>
  8. <BODY>
  9. <table>
  10. <THead>
  11. <tr>
  12.     <th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th>
  13. </tr>
  14. </THead>
  15. <TBody>
  16. <tr>
  17.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  18. </tr>
  19. <tr>
  20.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  21. </tr>
  22. <tr>
  23.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  24. </tr>
  25. <tr>
  26.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  27. </tr>
  28. <tr>
  29.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  30. </tr>
  31. <tr>
  32.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  33. </tr>
  34. <tr>
  35.     <th>Lorem</th><th>Ipsum</th><th>Bidule</th>
  36. </tr>
  37. </tbody>
  38. <tfoot>
  39. <tr>
  40.     <th>Pied 1</th><th>Pied 2</th><th>Pied 3</th>
  41. </tr>
  42. </TFoot>
  43. </table>


 
J'ai à ma disposition du HTML (donc le tableau peut ne pas être un tableau, mais ce sont tout de même des données tablulaires ;)), du javascript (c'est pour un Intranet), et un peu de JSP...
 
Donc si vous avez une idée par où commencer, j'suis prenneur  :)


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 10:07:15   

Reply

Marsh Posté le 28-07-2005 à 10:09:39    

Pouet, encore un bug d'IE qui ne traite pas les éléments de la même façon :(
 
Seul moyen, utiliser un premier tableau pour les entête, puis un deuxième imbriqué dans une <div>...

Reply

Marsh Posté le 28-07-2005 à 10:18:08    

bon heu au passage, pourquoi utiliser TH partout, alors qu'il ne sert que pour les entete de tableau, pour le reste faut utiliser TD

Reply

Marsh Posté le 28-07-2005 à 10:19:01    

FlorentG a écrit :

Pouet, encore un bug d'IE qui ne traite pas les éléments de la même façon :(
 
Seul moyen, utiliser un premier tableau pour les entête, puis un deuxième imbriqué dans une <div>...


bah ouais, c'est ce qui est fait dans mon intranet, le coup des deux tableaux, le problème, c'est que je trouve ça un peu lourd à mettre en place, et surtout, la difficulté ici est de récupérer la taille des colonnes pour qu'elles soient identiques entre l'entête et le corps du tableau (JS forcement, je supose) :-\
 
Je pourrais peut être faire un JS qui mets les bonnes tailles, mais j'ai peur que

  • vu la buse que j'suis en JS, ça parte facilement en cacahouete
  • ça devienne une vrai usine a gaz impossible à maintenir ce truc  :D  


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 10:19:46    

gatsusat a écrit :

bon heu au passage, pourquoi utiliser TH partout, alors qu'il ne sert que pour les entete de tableau, pour le reste faut utiliser TD


parce que j'ai fais un copier/coller un peu trop rapide  :D


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 10:24:12    

Demande à ton Boss ou à ton sysadmin de passer toute la boîte sous FF, ça sera plus simple :D

Reply

Marsh Posté le 28-07-2005 à 10:31:41    

FlorentG a écrit :

Demande à ton Boss ou à ton sysadmin de passer toute la boîte sous FF, ça sera plus simple :D


Bah ils se sont posé la question l'année dernière, le problème c'est qu'il faudrait refaire tout l'intranet  :D  :D  :D Et cette intranet, il est utilisé par d'autres sociétés qui sont quasiement que sur IE (il n'y a qu'une personne sur les jesaispascombiendepersonnesmaisy'enabeaucoup qui a du essayé FireFox)
 
-- j'admet que sur ce point là, c'est un peu bancalle --  
 


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 10:31:45    

sinon attends IE7 en priant, on sait jamais, les miracles sont toujours possibles :D

Reply

Marsh Posté le 28-07-2005 à 10:33:34    

ceyquem a écrit :

sinon attends IE7 en priant, on sait jamais, les miracles sont toujours possibles :D


faut qu'IE 7 marche sur des p166 et autre aussi...car les machines des clients, spa des bêtes de courses, hein.


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 10:33:44    

Mais alors pries vraiment beaucoup, avec ta famille au complet si possible :D


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 28-07-2005 à 10:33:44   

Reply

Marsh Posté le 28-07-2005 à 10:37:16    

zapan666 a écrit :

faut qu'IE 7 marche sur des p166 et autre aussi...car les machines des clients, spa des bêtes de courses, hein.


Tant que tu ne bardes pas de PNG-32 avec couche alpha, ça devrait aller ;)

Reply

Marsh Posté le 28-07-2005 à 11:45:12    

C'est dur en JS de prendre une partie d'un tableau et de la recopié toutes les X lignes ?  
j'vais faire un tour sur QuirkMod car pour l'instant, tout ce que j'ai trouvé ce sont des document.write...


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 11:47:28    

avec des fonctions dom style createElement

Reply

Marsh Posté le 28-07-2005 à 16:59:37    

FlorentG a écrit :

avec des fonctions dom style createElement


Donc, résultat des courses, j'ai foutu mon tableau dans un div, avec un overflow, et l'entête se répete toutes les x lignes.
 
Pour répéter l'entête, j'utilise le javascript : je copie le contenu du noeud thead que je clone & que j'insère dans le tbody toutes les x lignes : même pas besoin d'utilisé createElement  :p  
 
et sans javascript optrusif en plus  :p  


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 17:00:55    

Hopla

Reply

Marsh Posté le 28-07-2005 à 17:07:20    

Youplaboum!
(c rien je ne fais que passer pour exprimer ma joie que les autres au moins trouvent solution à leur pb avec IE =) )

Reply

Marsh Posté le 28-07-2005 à 17:09:27    

Zxyankxya a écrit :

Youplaboum!
(c rien je ne fais que passer pour exprimer ma joie que les autres au moins trouvent solution à leur pb avec IE =) )


C'est pas vraiment une solution, car je n'optiens pas exactement ce que je voulais, mais bon, ça me va, pour l'instant. puis j'suis super fier de mon bout de javascript surtout  :D  


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 28-07-2005 à 17:28:06    

zapan666 a écrit :

faut qu'IE 7 marche sur des p166 et autre aussi...car les machines des clients, spa des bêtes de courses, hein.


Sans compter qu'il me semble qu'IE 7 ne sera pas dispo pour Windows 2000 et que de nombreuses entreprises y sont encore. :/

Reply

Marsh Posté le 28-07-2005 à 17:45:12    

Sinon, perso, j'ai un truc comme ça sur le site que je suis en train de faire, j'ai utiliser la solution de tableau avec entête et reste du tableau dans une iframe. Mais la largeur des colonnes est fixe, donc c'est plus simple.
 
Non, j'déconne, j'suis taquin... :D, j'ai utilisé un div overflow pour le reste du tableau. :D

Reply

Marsh Posté le 28-07-2005 à 18:41:07    

Joue pas avec mes nerfs comme ça :o

Reply

Marsh Posté le 28-07-2005 à 19:18:18    

zapan666 a écrit :

Donc, résultat des courses, j'ai foutu mon tableau dans un div, avec un overflow, et l'entête se répete toutes les x lignes.
 
Pour répéter l'entête, j'utilise le javascript : je copie le contenu du noeud thead que je clone & que j'insère dans le tbody toutes les x lignes : même pas besoin d'utilisé createElement  :p  
 
et sans javascript optrusif en plus  :p


 
 
Je t'aime mon copain de Javascript.

Reply

Marsh Posté le 29-07-2005 à 15:05:32    

[hs]IE 7 bêta est un merde. c'est que la première bêta, mais 2 bugs css corrigés ... c'est ... juste un peu quoi [:pingouino][/hs]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 29-07-2005 à 15:11:35    

tiens au passage sur le forum de PPC j'ai posté une méthode pour tester IE7 sans l'installer.
 
ben look les commentaires, ils sont tous en train de pleurer car il l'ont installés un peu vite.  
 
c'est une béta très béta. on dirait un réchauffé d'interface FF avec le moteur MSHTML  
 
donc pour eviter de l'installer j'ai chercher une méthode plus simple. Je voulais le faire au départ sur une Machine Virtuelle, mais trop lourd à procéder.  
 
Donc j'ai posté cette réponse.  
 
Au passage il n'y a rien d'interessant dans cette Beta de IE7, apparament il ne supporte toujours pas les display:table-cell pour les CSS  
et il utilise toujours le BoxModel Microsoft  
 
dommage

Reply

Marsh Posté le 29-07-2005 à 15:13:23    

Il n'utilise le box model microsoft qu'en mode quirks ;) C'est comme ie6, hein ;) Et sinon niveau CSS ils n'ont corrigé que les bug Peekaboo et Guillotine

Reply

Marsh Posté le 29-07-2005 à 15:15:16    

Reply

Marsh Posté le 29-07-2005 à 15:19:02    

J'adore ton smiley plainsofpain!!!!


---------------
Reine des boulets et boulettes - Briseuse de touillettes professionnelle
Reply

Marsh Posté le 29-07-2005 à 15:21:20    

Il y a toujours ca http://www.activewidgets.com/
Faudrait voir comment c'est fait.
Le script fonctionne sur Fx et IE normalement (neanmoins je viens de remarque qu'il ne fonctionne _pas du tout_ sur Deer Park alpha 2..)

Reply

Marsh Posté le 29-07-2005 à 15:23:21    

cerel a écrit :

Il y a toujours ca http://www.activewidgets.com/
Faudrait voir comment c'est fait.
Le script fonctionne sur Fx et IE normalement (neanmoins je viens de remarque qu'il ne fonctionne _pas du tout_ sur Deer Park alpha 2..)


Ca serait encore mieux si par exemple leur grille réorganisable s'affichait sous forme d'un simple tableau chez les utilisateurs sans JS...

Reply

Marsh Posté le 29-07-2005 à 15:27:53    

ils sentent le Caca les ActieWidget, car sans JS : Site Innacessible puisque données non affichées

Reply

Marsh Posté le 29-07-2005 à 15:33:21    


 
C'est pas le mien, il est dans la liste d'hfr, c'est dans les m :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 29-07-2005 à 15:49:29    

cerel a écrit :

Il y a toujours ca http://www.activewidgets.com/
Faudrait voir comment c'est fait.
Le script fonctionne sur Fx et IE normalement (neanmoins je viens de remarque qu'il ne fonctionne _pas du tout_ sur Deer Park alpha 2..)


j'ai vu, j'ai pas pris.
J'veux éviter de faire de mon truc une usine a gaz...


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 29-07-2005 à 16:03:16    

ActiveWidgets c'est peut etre beau et bien fait, mais accessibilité = 0.
 
Alors que je pense que : Un tableau normal en HTML
 
puis un evenement onload Activeletableau
et la fonction modifierai tout le comportement du tableau comme tu le souhaite. du coup on a : Accessibilité et Comportement propre à la Activewidget

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed