Toujours voir les entêtes des tables

Toujours voir les entêtes des tables - HTML/CSS - Programmation

Marsh Posté le 06-03-2006 à 23:22:29    

Bonjour,  
 
Voila j'explique mon problème. Grâce à PHP et HTML je crée une table sur une page. Ce tableau a de forte chance d'avoir une taille importante et je voudrais toujours pouvoir voir les entètes de ma table.  
 
Je voudrai donc toujours afficher la colonne ou ligne d'entète même après avoir scroller la page.  
 
Je n'ai aucune idée de la technique à adopter.  
 
Merci pour votre aide.

Reply

Marsh Posté le 06-03-2006 à 23:22:29   

Reply

Marsh Posté le 07-03-2006 à 07:05:51    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2.  
  3. <html> 
  4. <head> 
  5.     <title></title> 
  6.     <style> 
  7.     * { 
  8.         margin:0; padding:0; 
  9.     } 
  10.     #tableau{ 
  11.         width:376px; 
  12.         border-collapse: collapse; 
  13.     } 
  14.     #tableau TH{ 
  15.         border:1px solid black; 
  16.     } 
  17.     .col1{ width:70px; } 
  18.     .col2{ width:100px; } 
  19.     .col3{ width:200px; } 
  20.     #tableauIn{ 
  21.         width:396px; 
  22.         overflow:auto; 
  23.         height:200px; 
  24.     } 
  25.     #tableauIn table{ 
  26.         width:376px; 
  27.         border-collapse: collapse; 
  28.     } 
  29.     #tableauIn TD{ 
  30.         border:1px solid black; 
  31.     } 
  32.     </style> 
  33. </head> 
  34.  
  35. <body> 
  36.  
  37. <table id="tableau" cellspacing="0"> 
  38.     <thead> 
  39.         <th class="col1">type</th> 
  40.         <th class="col2">vaccin</th> 
  41.         <th class="col3">animaux</th> 
  42.     </thead> 
  43. </table> 
  44. <div id="tableauIn">     
  45. <table cellspacing="0"> 
  46.     <tbody> 
  47.         <tr> 
  48.             <td class="col1">truc 1</td> 
  49.             <td class="col2">truc 2</td> 
  50.             <td class="col3">truc 3</td> 
  51.         </tr> 
  52.         <tr> 
  53.             <td>truc 1</td> 
  54.             <td>truc 2</td> 
  55.             <td>truc 3</td> 
  56.         </tr> 
  57.         <tr> 
  58.             <td>truc 1</td> 
  59.             <td>truc 2</td> 
  60.             <td>truc 3</td> 
  61.         </tr> 
  62.         <tr> 
  63.             <td>truc 1</td> 
  64.             <td>truc 2</td> 
  65.             <td>truc 3</td> 
  66.         </tr> 
  67.         <tr> 
  68.             <td>truc 1</td> 
  69.             <td>truc 2</td> 
  70.             <td>truc 3</td> 
  71.         </tr> 
  72.         <tr> 
  73.             <td>truc 1</td> 
  74.             <td>truc 2</td> 
  75.             <td>truc 3</td> 
  76.         </tr> 
  77.         <tr> 
  78.             <td>truc 1</td> 
  79.             <td>truc 2</td> 
  80.             <td>truc 3</td> 
  81.         </tr> 
  82.         <tr> 
  83.             <td>truc 1</td> 
  84.             <td>truc 2</td> 
  85.             <td>truc 3</td> 
  86.         </tr> 
  87.         <tr> 
  88.             <td>truc 1</td> 
  89.             <td>truc 2</td> 
  90.             <td>truc 3</td> 
  91.         </tr> 
  92.         <tr> 
  93.             <td>truc 1</td> 
  94.             <td>truc 2</td> 
  95.             <td>truc 3</td> 
  96.         </tr> 
  97.         <tr> 
  98.             <td>truc 1</td> 
  99.             <td>truc 2</td> 
  100.             <td>truc 3</td> 
  101.         </tr> 
  102.         <tr> 
  103.             <td>truc 1</td> 
  104.             <td>truc 2</td> 
  105.             <td>truc 3</td> 
  106.         </tr> 
  107.         <tr> 
  108.             <td>truc 1</td> 
  109.             <td>truc 2</td> 
  110.             <td>truc 3</td> 
  111.         </tr> 
  112.         <tr> 
  113.             <td>truc 1</td> 
  114.             <td>truc 2</td> 
  115.             <td>truc 3</td> 
  116.         </tr> 
  117.         <tr> 
  118.             <td>truc 1</td> 
  119.             <td>truc 2</td> 
  120.             <td>truc 3</td> 
  121.         </tr> 
  122.         <tr> 
  123.             <td>truc 1</td> 
  124.             <td>truc 2</td> 
  125.             <td>truc 3</td> 
  126.         </tr> 
  127.         <tr> 
  128.             <td>truc 1</td> 
  129.             <td>truc 2</td> 
  130.             <td>truc 3</td> 
  131.         </tr> 
  132.         <tr> 
  133.             <td>truc 1</td> 
  134.             <td>truc 2</td> 
  135.             <td>truc 3</td> 
  136.         </tr> 
  137.         <tr> 
  138.             <td>truc 1</td> 
  139.             <td>truc 2</td> 
  140.             <td>truc 3</td> 
  141.         </tr> 
  142.         <tr> 
  143.             <td>truc 1</td> 
  144.             <td>truc 2</td> 
  145.             <td>truc 3</td> 
  146.         </tr> 
  147.         <tr> 
  148.             <td>truc 1</td> 
  149.             <td>truc 2</td> 
  150.             <td>truc 3</td> 
  151.         </tr> 
  152.         <tr> 
  153.             <td>truc 1</td> 
  154.             <td>truc 2</td> 
  155.             <td>truc 3</td> 
  156.         </tr> 
  157.         <tr> 
  158.             <td>truc 1</td> 
  159.             <td>truc 2</td> 
  160.             <td>truc 3</td> 
  161.         </tr> 
  162.         <tr> 
  163.             <td>truc 1</td> 
  164.             <td>truc 2</td> 
  165.             <td>truc 3</td> 
  166.         </tr> 
  167.         <tr> 
  168.             <td>truc 1</td> 
  169.             <td>truc 2</td> 
  170.             <td>truc 3</td> 
  171.         </tr> 
  172.     </tbody> 
  173. </table> 
  174. </div> 
  175. </body> 
  176. </html>

Reply

Marsh Posté le 15-03-2006 à 16:10:50    

Ces lignes m'ont permis d'avancer un peu dans ce que je voulais réaliser mais malheureusement, je pense qu'on ne peut pas appliquer ceci pour que le tableau soit scrollable dans les 2 sens tout en gardant chaque fois les entetes. Il est fort possible que je me trompe, mais je n'est pas réussi a le faire.
 
Merci de m'aider encore une fois.

Reply

Marsh Posté le 15-03-2006 à 16:25:43    

qu'est ce que tu entends qu'il soit scrollable dans les 2 sens ?
horizontal et vertical ?  
toute en gardant l'entete horizontal qui alors se déplacerait en même temps que le tableau ?
 
Ah oui c'est beaucoup plus compliqué que ça n'y paraît, faudrait jouer avec le javascript dans ce cas, et pardon pour toi, tu vas avoir du mal alors

Reply

Marsh Posté le 15-03-2006 à 16:53:02    

Reply

Marsh Posté le 15-03-2006 à 21:16:59    

Ouais donc je te remercie pour avoir déjà en parti résolu mon problème.
 
Mais mon nouveau problème est que j'ai des entêtes en haut mais aussi à gauche du tableau:
 
|______| type1 | type2 | type3 | type4 |
| type5 |______|______|______|______|
| type6 |______|______|______|______|
| type7 |______|______|______|______|
 
Bon voici en fait la structure de mon tableau. Je souhaiterais donc pouvoir toujours voir les entêtes des cellules affichées à l'écran.
Par exemple lorsque je scroll verticalement les entêtes du haut doivent toujours être visible (ce que tu m'as déjà aidé à faire :) ) mais il faut aussi que les entêtes du haut se décale lorsque je scroll horizontalement tout en gardant visible les entêtes de gauche.
 
Je remercie d'avance quiconque m'aidera à résoudre mon problème.
 

Reply

Marsh Posté le 15-03-2006 à 21:27:41    

no problème :D tu attends c'est tout :D

Reply

Marsh Posté le 15-03-2006 à 21:43:07    

http://gatsu.ftp.free.fr/html/test_tableau.html  l'idée est là mais la conception laisse à désirer,

Reply

Marsh Posté le 15-03-2006 à 22:54:57    

http://gatsu.ftp.free.fr/html/test_tableau.html  
Version améliorée
Cette fois-ci il calcule la largeur du bloc de droite
la hauteur du  bloc du gauche
et en plus il calcul la largeur des cellules du bloc de droite en fonction des cellules du tableau centre, idem pour le tableau de gauche.
 
De plus il faut faire attention à la structure du tableau maintenant.
 
il y a un div qui englobe 3 div, ce div a un id
les 3 autres divs ont des classes associées, respectivement top, left et center
 
A toi de regarder. mais normalement mon script fonctionne pour plusieurs tableaux dans une meme page.
 
Attention néanmoins, je n'ai pas testé sous safari et opera. merci

Reply

Marsh Posté le 15-03-2006 à 23:01:30    

C est très joli. J étais en train de faire des tests avec le même genre de méthode: des divs en position relative dans les cases d entête. Mais avec FireFox les touches n activent pas la l évènement onscroll, seule la souris le fait.

Reply

Marsh Posté le 15-03-2006 à 23:01:30   

Reply

Marsh Posté le 15-03-2006 à 23:39:57    

ben tu regardes ma page de test et tu verras que ca marche dans tous les cas, touches de clavier ou souris et mon onscroll fonctionne parfaitement

Reply

Marsh Posté le 15-03-2006 à 23:48:55    

Sur ta page c est bizarrre, j ai pas le focus clavier donc les flèches du clavier ne font pas scroller. Dans le test que j ai fait, j utilise le document.onscroll, jai le focus et les flèches du clavier font défiler mais n activent pas le onscroll. j ai Firefox 1.0.1 sous linux.  
 
Opéra lui ne connait apparemment pas onscroll.

Reply

Marsh Posté le 15-03-2006 à 23:51:49    

hummmmm
tu as bien mis le focus sur l'élément qui a les scrollers ?

Reply

Marsh Posté le 15-03-2006 à 23:54:51    

Pour FF, oui, j ai même essayé de sélectionner du texte pour forcer le focus, mais rien du tout, pas de focus clavier.

Reply

Marsh Posté le 15-03-2006 à 23:57:23    

C est que onscroll() n est pas très portable, il me semble. p-e en utilisant un timer. mais ça ne sera pas si fluide.

Reply

Marsh Posté le 16-03-2006 à 00:05:29    

Pour FF/Opera il y a une position css qui il me semble fonctionne: fixed, mais qui ne marche pas avec IE. Il faudrait une iframe pour FF/Opera et onscroll pour IE.

Reply

Marsh Posté le 16-03-2006 à 00:08:12    

JE précise que je n'ai testé que sous Firefox et IE sous Windows XP
donc bon ce n'est pas forcément la meilleure solution aussi pour avoir un joli tableau delamortkitu facon excel.
 
J'ai juste fait ça pour l'effet de style

Reply

Marsh Posté le 16-03-2006 à 08:29:57    

http://gatsu.ftp.free.fr/html/test_tableau.html
Dernier essai, là j'ai bourriné comme un porc, c'est propre, et tout automatique, et que c'est comme le post précédent
 
tu as un squelette comme ceci :  

Code :
  1. <div id="tableau">
  2. <div class="top">
  3.  <table cellspacing="0">
  4.      <thead>
  5.          <th>type</th>
  6.          <th>vaccin</th>
  7.          <th>animaux</th>
  8.      </thead>
  9.  </table>
  10. </div>
  11. <div class="left">
  12.  <table cellspacing="0">
  13.   <tbody>
  14.    <tr>
  15.     <td>1</td>
  16.    </tr>
  17.    <tr>
  18.     <td>2</td>
  19.    </tr>
  20.   </tbody>
  21.  </table>
  22. </div>
  23. <div class="center">
  24.  <table cellspacing="0">
  25.      <tbody>
  26.          <tr>
  27.              <td>truc 1</td>
  28.              <td>truc 2</td>
  29.              <td>truc 3</td>
  30.          </tr>
  31.          <tr>
  32.              <td>truc 1</td>
  33.              <td>truc 2</td>
  34.              <td>truc 3</td>
  35.          </tr>
  36.      </tbody>
  37.  </table>
  38. </div>
  39. </div>


comme tu peux le constater
ya 3 div dans ce div qui contiennent les class left, top et center
et chaque div contient un tableau à l'interieur.
 
tu peux bien sûr ommettre tbody et thead.
 
Sinon pour le javascript tu as juste à initiliser le tableau via
initTableauscroll("iddutabeau" )
et basta tout le reste sera automatique.
redimensionnement des celulles, mise en page....
 
sinon j'ai toujours un bug de 3px et je n'arrive toujours pas à le résoudre. Donc pour corriger le décalage produit je m'occupe de caller le bloc top avec le bloc center :/

Reply

Marsh Posté le 16-03-2006 à 08:35:13    

Bon appelle moi dieu et analyse bien le code :o

Reply

Marsh Posté le 16-03-2006 à 09:08:05    

Yesssssssss je suis le plus fort :o :o :o :o :o
http://gatsu.ftp.free.fr/html/test_tableau.html  
Correction effectué avec un ptit coup de baguette de CSS

Reply

Marsh Posté le 16-03-2006 à 09:16:37    

Bon d'après un anonyme du nom de FlorentG ma solution est à chier car non accessible, et c'est surtout que je peux très bien splitter le tableau comme bon me semble, donc tu attendras ce soir pour une solution qui déchire sa race :o ou tu n'auras juste qu'un seul tableau et tout se fera automatiquement ensuite


Message édité par gatsu35 le 16-03-2006 à 09:17:14
Reply

Marsh Posté le 16-03-2006 à 11:19:22    

Salut,
Je viens de regarder tout ça et maintenant ça me pose un gros problème : il faut que je trouve comment justifier de mettre un truc comme ça dans mon projet car je trouve ça trop cool :)

Reply

Marsh Posté le 16-03-2006 à 11:43:59    

Tu attends 30 seconde la V2 qui fait tout toute seule, tu n'a juste qu'à lui donner un tableau a manger, la largeur et la hauteur et basta
mais j'ai un problème de dimensions de merde sous IE

Reply

Marsh Posté le 16-03-2006 à 11:44:11    

heu pas 30 secondes mais une heure si possible merci :o

Reply

Marsh Posté le 16-03-2006 à 18:55:39    

http://gatsu.ftp.free.fr/html/test_tableau.html
 
Bon aller dernière version, elle fonctionne nickel sous Firefox et IE
vous n'avez juste qu'à lui donner un tableau et elle se debrouille pour le splitter et faire le boulot à votre place.
 
imaginons un tableau

Code :
  1. <table id="tableau" cellspacing="0">
  2.     <thead>
  3.   <tr>
  4.     <th></th>
  5.         <th>type</th>
  6.         <th>vaccin</th>
  7.         <th>animaux</th>
  8.  </tr>
  9.     </thead>
  10. <tbody>
  11.  <tr>
  12.   <td>1</td>
  13.            <td>truc 1</td>
  14.            <td>truc 2</td>
  15.            <td>truc 3</td>
  16.  </tr>
  17.  <tr>
  18.   <td>2</td>
  19.            <td>trucfffffffffffffffffffffffff 1</td>
  20.            <td>truc 2</td>
  21.            <td>truc 3</td>
  22.  </tr>
  23.  <tr>
  24.   <td>3</td>
  25.            <td>truc 1</td>
  26.            <td>truc 2ssssssssssssssssssssssssssssssssssss</td>
  27.            <td>truc 3</td>
  28.  </tr>
  29.  <tr>
  30.   <td>4</td>
  31.            <td>truc 1</td>
  32.            <td>truc 2</td>
  33.            <td>truc 3sssssssssssssssssssssssssssss</td>
  34. </tr>
  35. </tbody>
  36. </table>


 
et bien vous n'avez juste qu'à faire :  
 
initTableScroll(tableid, largeur, hauteur);
 
initTableScroll("tableau",300, 200);
 
automatiquement le tableau sera splitté, les éléments placés ou il faut et dimensionnés au px près. Et les dimensions des cellules des tableaux de gauche et droite seront recalculés.
 
 
Attention ce script fonctionne parfaitement avec IE 6 SP2 et firefox 1.x
avec IE5.5 ya un ptit bug d'affichage mais on s'en fout IE5.5 devrait déjà avoir disparu de la surface de la terre.
Sinon laissez tomber pour Opera, cela ne fonctionnera pas du tout puisque l'évènement Onscroll n'est pas implémenté dans la V8.53 ni la V9Beta après plusieurs tests sous v8.53 et recherche sur V9
 
Donc ce script est à utiliser dans un intranet ou un environnement controlé

Reply

Marsh Posté le 17-03-2006 à 13:50:53    

Merci beaucoup pour cette fonction qui va vraiment m'aider, c'est exactement ce que je voulais réaliser.  

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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