Tableau et css

Version imprimable

Tableau et css

Bonjour,

j'essaye actuelement de construire un tableau dans lequel la premiere ligne resterait fixe et les ligne a partir de la seconde contiendraient des données issus d'une base. Dans la deuxieme partie de ce tableau j'essaye de mettre un ascenseur permettant de descendre dans les données tout en pouvant visualiser la premiere ligne de ce tableau.

Pour un peu plus de clareté dans mes explications voici ( dans l'idée) à quoi ressemble mon code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div  id="div_GrandCadre" style="height:300px;">
<table cellpadding="0" cellspacing="0" border="3">
    <div id="div_PetitCadreHaut">
	<tr bgcolor="green">
           <td>Champs 1</td>
 	   <td>Champs 2</td>
           <td>........
           <td>Champs 25</td>
   </tr>						
   </div>
  <!--- ascenseur sur la partie qui suit -->
   <div id="div_PetitCadreBas">
   <tr>
       <td> Valeur 1 </td>
       .......... <!-- 25 valeurs -->
   </tr>
   <tr>
       <td> Valeur 2 </td>
       .......... <!-- 25 valeurs -->
   </tr>
  </div>
</table>
</div>

Et pour la feuille de style :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#div_GrandCadre
{
	Z-INDEX: 1;
	PADDING-RIGHT: 0px;
    PADDING-LEFT: 4px;
    PADDING-BOTTOM: 0px; 
    PADDING-TOP: 0px;		
 
    SCROLLBAR-FACE-COLOR: #dedede;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #999999;
    SCROLLBAR-3DLIGHT-COLOR: #cdcdcd;
    SCROLLBAR-ARROW-COLOR: #454545;
	SCROLLBAR-DARKSHADOW-COLOR: #c5def4;
	SCROLLBAR-BASE-COLOR: #efefef;    
 
	MARGIN-RIGHT:auto;
	MARGIN-LEFT:auto;
	OVERFLOW:auto;		
}
 
#div_PetitCadreHaut
{
	Z-INDEX: 2;
	PADDING-RIGHT: 0px;
    PADDING-LEFT: 4px;
    PADDING-BOTTOM: 0px; 
    PADDING-TOP: 0px;		
 
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
	OVERFLOW: auto;	
}
 
 
#div_PetitCadreBas
{
	Z-INDEX: 1;
	PADDING-RIGHT: 0px;
    PADDING-LEFT: 4px;
    PADDING-BOTTOM: 0px; 
    PADDING-TOP: 0px;		
 
    SCROLLBAR-FACE-COLOR: #dedede;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #999999;
    SCROLLBAR-3DLIGHT-COLOR: #cdcdcd;
    SCROLLBAR-ARROW-COLOR: #454545;
	SCROLLBAR-DARKSHADOW-COLOR: #c5def4;
	SCROLLBAR-BASE-COLOR: #efefef;    
 
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
	OVERFLOW: auto;	
}

Le résultat que j'obtiens est plutot décevant car en descendant l'ascenseur, ma premiere ligne ne reste pas visible.

J'espères que quelqu'un aura dejà rencontré ce problème et pourra m'aider. Merci

[Modération: ajout des balises "code"]

26/07/2005, 16h17
TommyWeb

Sans avoir testé le code ni rien.. J'ai quelques points qui me viennent à l'esprit.
1 - Je trouve ta façon bizarre ^^
2 - Tu as mits un overflow dans les deux parties des divisions (première ligne et deuxième ligne) or d'après ton texte, tu n'en veux que dans la deuxième ligne non ?
3 - Tu peux montrer la page ou tu as mit ce code pour que je puisse voir ce que ça donne ? ;) (j'ai la flemme de tester lol)

Remarque, je comprend quand même pas pourquoi tu perds la première ligne si tu scrolle dans la deuxième ligne :-/
26/07/2005, 18h06
LeDoc

Oui je sais c'est vrai mais je l'ai retirer de toute maniere le probleme est le meme je ne visualise pas l'ascenseur dans la deuxieme partie du tableau.

En fait j'obtient un tableau avec deux ascenseurs un en bas et un deuxieme a droite le probleme c'est que j'utilise le deuxieme toutes les lignes défilent alors que je voudrais qu'il faudrait que la premiere ligne reste en haut pendant que les autres défilent. Je n'ai plus de copie du code car je suis actuelement en train d'essayer avec des iframes mais je suis confronté à un autre probleme.
26/07/2005, 19h11
TommyWeb

J'arrive toujours pas à comprendre :p

C'est champs1, 2, 25 qui doivent rester présent et Valeur 1 et Valeur 2 qui doivent être dans l'overflow ?
27/07/2005, 09h38
LeDoc

Oui voila c'est ça. Il me faut un ascenseur vertical à droite de la deuxieme ligne à la fin du tableau et un horizontal en bas pour pouvoir visualiser la tous les champs du tableau car il est plutot long.
27/07/2005, 10h15
TommyWeb

Dans ce cas, il te faudra également un scroll horizontale pour la première ligne sinon ça sera assez moche..

(Je regarderai plus au problème dés que je serai bien réveillé ;)
27/07/2005, 10h26
LeDoc

Ok d'ac avec un bon café ça devrait le faire. :D Le probleme du scroll sur la premiere ligne est qu'il risque d'être difficile de visualiser les bonnes données au bon endroit a moins de pouvoir synchroniser les deux asenceurs.
27/07/2005, 10h49
TommyWeb

Je viens de tester, et effectivement, il n'y a pas moyen de mettre un scroll juste sur une ligne..

Sauf si tu fais 2 tableaux..

Le premier tableau qui va contenir qu'une seule ligne (celle des champs) avec le scroll. Et un second tableau pour contenir tes valeurs avec un scroll également.

(Mais tu ne seras pas faire en sorte de coordiner les deux scroll simplement en html/css, il y a peut-être moyen en javascript je sais pas je maitrise pas trop le javascript.)

Et ça donne ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.champs {
   overflow: auto;
   width: 80%;
}
 
.valeurs {
   overflow: auto;
   width: 80%;
   height: 100px;
}
 
.champs td {
  width: 100px;
}
 
.valeurs td {
  width: 100px;
}

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<div class='champs'>
	<table cellpadding="0" cellspacing="0" border="3">
		<tr bgcolor="green"><!-- Première ligne avec les champs -->
        		<td>Champs 1</td>
       			<td>Champs 2</td>
           		<td>........
           		<td>Champs 25</td>
   		</tr> <!-- Fin Première ligne avec les champs -->
	</table>
</div>
<div class='valeurs'>
	<table cellpadding="0" cellspacing="0" border="3">
		<tr> <!-- Valeur 1 -->
       			<td> Valeur 1 </td>
       			<td> Valeur 1 champs2 </td>
       			<td> Valeur 1 ..... </td>
       			<td> Valeur 1 champs25 </td>
		</tr> <!-- Fin Valeur 1 -->
   		<tr> <!-- Valeur 2 -->
       			<td> Valeur 2 </td>
       			<td> Valeur 2 champs2 </td>
       			<td> Valeur 2 ..... </td>
       			<td> Valeur 2 champs25 </td>
		</tr> <!-- Fin Valeur 2 -->
   		<tr> <!-- Valeur 3 -->
       			<td> Valeur 3 </td>
       			<td> Valeur 3 champs2 </td>
       			<td> Valeur 3 ..... </td>
       			<td> Valeur 3 champs25 </td>
		</tr> <!-- Fin Valeur 3 -->
   		<tr> <!-- Valeur 4 -->
   	    		<td> Valeur 4 </td>
   	    		<td> Valeur 4 champs2 </td>
   	    		<td> Valeur 4 ..... </td>
   	    		<td> Valeur 4 champs25 </td>
		</tr> <!-- Fin Valeur 4 -->
   		<tr> <!-- Valeur 5 -->
    	   		<td> Valeur 5 </td>
    	   		<td> Valeur 5 champs2 </td>
    	   		<td> Valeur 5 ..... </td>
    	   		<td> Valeur 5 champs25 </td>
		</tr> <!-- Fin Valeur 5 -->
   		<tr> <!-- Valeur 6 -->
    	   		<td> Valeur 6 </td>
    	   		<td> Valeur 6 champs2 </td>
     	  		<td> Valeur 6 ..... </td>
     	  		<td> Valeur 6 champs25 </td>
		</tr> <!-- Fin Valeur 6 -->
   		<tr> <!-- Valeur 7 -->
      	 		<td> Valeur 7 </td>
      	 		<td> Valeur 7 champs2 </td>
      	 		<td> Valeur 7 ..... </td>
      	 		<td> Valeur 7 champs25 </td>
		</tr> <!-- Fin Valeur 7 -->
   		<tr> <!-- Valeur 8 -->
   	    		<td> Valeur 8 </td>
   	    		<td> Valeur 8 champs2 </td>
    	   		<td> Valeur 8 ..... </td>
    	   		<td> Valeur 8 champs25 </td>
		</tr> <!-- Fin Valeur 8 -->
	</table>
</div>

Voila, maintenant, c'est à toi à adapter ça comme tu le souhaites ;)

27/07/2005, 11h43
LeDoc

Ok d'ac merci beaucoup pour ton temps. Je vais faire comme ça en attendant de voir si je ne trouve pas quelque chose en javascript. Encore merci :wink: