fonction barre de defilement pour tableau

Version imprimable

bonjour tout le monde!

voila je n'y connais quasiment rien en javascript et on m'a demandé de faire une barre de défilement dans mon tableau au cas ou il serait trop grand, apparemment c'est faisable en javascript mais je vois pas du tout comment faire.

j'ai une fonction qui créé une ligne de tableau à chaque nouvelle ligne dans ma bdd (script php evidemment) et je voudrai que si il y a plus de 5 lignes dans le tableau on affiche une barre de defilement verticale, autrement on affiche rien.

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
 
function construire_tableau($login)
  {
    // on selectionne les informations relatives à tous les fichiers présents dans la base pour un utilisateur donné
    $req = mysql_query(r_donne_caracteristiques_fichier($login)) or die ('erreur lors de l\'exécution de la requête, veuillez réessayer');
 
	// tant qu'il y a des lignes retournées par la requête, on ajoute une ligne pour chaque fichier
	while($row = mysql_fetch_row($req)) 
		{
		  $code_doc = $row[0];
		  $chemin = $row[1];
		  $chemin = substr($row[1],7);
		  $heure_der_modif = substr($row[2],10,10);
		  $jour = substr($row[2],8,2);
		  $mois = substr($row[2],5,2);
		  $annee = substr($row[2],0,4);
		  $date_der_modif = "$jour-$mois-$annee";
		  $lib_document = trouver_nom_fichier($chemin);
 
		  echo '<tr>
		          <td class="ligne_tableau_fichier">'.$lib_document.'</td>
				  <td class="ligne_tableau_fichier">'.$chemin.'</td>
				  <td class="ligne_tableau_fichier">Le <u>'.$date_der_modif.'</u> à '.$heure_der_modif.'</td>
				  <td class="ligne_tableau_fichier">
				    <form action="action_ouverture_fichier.php" method="get">
 
					     <input type="hidden" value='.$code_doc.' name="code" />
                         <input type="submit" value="Ouvrir" name="ouvrir" />
 
                    </form>
				  </td>
				</tr>';
	    };
  };

et voici mon code HTML dans ma page, j'ai essayé avec un div overflow mais ca marche pas, et surtout c'est très moche!

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
 
<table class="tableau_fichier" align="center">
	    <tr>
		  <th class="en_tete_tableau">
 
		    Libellé du document
 
	      </th>
		  <th class="en_tete_tableau">
 
		    Emplacement du document
 
		  </th>
		  <th class="en_tete_tableau">
 
		    Date de dernière modification
 
		  </th>
		  <th class="en_tete_tableau">
 
		    Ouverture du document
 
	      </th>
		  </tr>
 
 
		  <?php construire_tableau($login) ?>
 
 
      </table>
 
	  </td>   
    </tr>

toute idée est la bienvenue, merci d'avance!

14/06/2006, 14h21
gorgonite

euh si tu fixes la hauteur de la case... elle ne va pas apparaitre toute seule comme avec les object, les frame, etc ???
14/06/2006, 14h23
supermanu

Après echo '<tr>
tu peux mettre une balise DIV
<div style="height:30px;">
...
</div>
Tu auras une scrollbar si la hauteru du tableau dépasse 30px.
14/06/2006, 14h27
charlene44

ca ne marche pas supermanu, ca me fou ma présentation de tableau en l'air, et je n'ai aucune barre de defilement. mais je voudrai pas une hauteur type en fait je voudrai que ca compte les lignes du tableau (les td pas les th) et si ca dépasse 5, hop une barre de defilement
14/06/2006, 14h48
supermanu

En fait tu n'as pas besoins de javascript. Le css suffit
Regarde le lien suivant : http://www.cssplay.co.uk/menu/tablescroll.html

Et regarde le code source. Si tu n'y arrive pas, demande, on trouvera une solutoin ;)

c'est un peu mieux mais j'ai un autre problème maintenant, mais cellules d'en tete ne sont pas liées à mes cellules td, apparemment j'ai lu sur le net que c'est avec scope qu'il faut faire ca, je l'ai fait mais ca ne marche pas, je vous envoi une capture d'ecran ainsi que mon code :

code css :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
.tableau_fichier
{
border : 1px solid blue;
text-align : center;
}
 
.th1
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 50px;
}
 
.th2
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 100px;
}
 
.th3
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 50px;
}
 
.th4
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 50px;
}
 
.td1
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 50px;
}
 
.td2
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 100px;
}
 
.td3
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 50px;
}
 
.td4
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 50px
}
 
.div_tableau
{
height : 10em;
overflow : auto;
}

code html :

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
 
      <td class="align_centre" colspan="2">
 
<br />
<br />
<br />
<br />
 
      <table class="tableau_fichier" align="center">
	    <thead>
	    <tr>
		  <th class="th1" scope="col">
 
		    Libellé du document
 
	      </th>
		  <th class="th2" scope="col">
 
		    Emplacement du document
 
		  </th>
		  <th class="th3" scope="col">
 
		    Date de dernière modification
 
		  </th>
		  <th class="th4" scope="col">
 
		    Ouverture du document
 
	      </th>
		  </tr>
		</thead>
 
		<tbody>
		<tr><td colspan="4">
 
		<div class="div_tableau">
 
          <table>
 
 
		  <?php construire_tableau($login) ?>
 
 
        </table>
 
        </div>
 
	  </td>   
    </tr>
 
	</tbody>
 
	</table>
 
	  </td>
	</tr>

code PHP :

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
 
  /*----------------- Fonction construire_tableau()------------------------*/
 
  function construire_tableau($login)
  {
    // on selectionne les informations relatives à tous les fichiers présents dans la base pour un utilisateur donné
    $req = mysql_query(r_donne_caracteristiques_fichier($login)) or die ('erreur lors de l\'exécution de la requête, veuillez réessayer');
 
	// tant qu'il y a des lignes retournées par la requête, on ajoute une ligne pour chaque fichier
	while($row = mysql_fetch_row($req)) 
		{
		  $code_doc = $row[0];
		  $chemin = $row[1];
		  $chemin = substr($row[1],7);
		  $heure_der_modif = substr($row[2],10,10);
		  $jour = substr($row[2],8,2);
		  $mois = substr($row[2],5,2);
		  $annee = substr($row[2],0,4);
		  $date_der_modif = "$jour-$mois-$annee";
		  $lib_document = trouver_nom_fichier($chemin);
 
		  echo '<tr>
		          <td class="td1">'.$lib_document.'</td>
				  <td class="td2">'.$chemin.'</td>
				  <td class="td3">Le <u>'.$date_der_modif.'</u> à '.$heure_der_modif.'</td>
				  <td class="td4">
				    <form action="action_ouverture_fichier.php" method="get">
 
					     <input type="hidden" value='.$code_doc.' name="code" />
                         <input type="submit" value="Ouvrir" name="ouvrir" />
 
                    </form>
				  </td>
				</tr>';
	    };
  };

capture d'écran : résultat

merci d'avance

ps : désolé pour le hs, je sais qu'on est dans la partie javascript et que je parle de css...

14/06/2006, 17h32
supermanu

Ouep...pas facile, moi j'ai essayé avec le premier exemple car il n'y qu'un seul tableau. Donc pas de problème de dimensions. Pour le premier exemple, j'ai réduit le nombre de colonnes à 4 et je n'ai pas eu de problèmes, ce qui n'est pas le cas pour le deuxième :?

ouais j'ai appliqué les changements, c'est mieux mais il y a un truc qui me chiffone, j'aimerai que la scrollbar ne soit que sur mes td et que mes th restent fixe, or elles sont comprises dedans. et quand je change un des div de place ca me fait tout planter.

petite précision, j'aimerai aussi que mon tableau soit centré sur ma page lol mais en rajoutant des "text-align : center" dans les div ca ne change rien.

HTML :
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 <td class="align_centre" colspan="2"> <br /> <br /> <br /> <br /> <div class="outer"> <div class="innera"> <table class="tableau_fichier" align="center"> <thead> <tr> <th class="en_tete_tableau" scope="col"> Libellé du document </th> <th class="en_tete_tableau" scope="col"> Emplacement du document </th> <th class="en_tete_tableau" scope="col"> Date de dernière modification </th> <th class="en_tete_tableau" scope="col"> Ouverture du document </th> </tr> </thead> <tbody> <?php construire_tableau($login) ?> </tbody> </table> </div> </div> </td> </tr>
CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .outer { position:relative; width : 820px; text-align : center; } .innera { overflow:auto; width : 820px; height : 10em; } .tableau_fichier { border : 1px solid blue; text-align : center; width : 800px; }
résultat
merci d'avance

15/06/2006, 11h11
supermanu

1 pièce(s) jointe(s)
Regarde le fichier attaché, j'ai enlevé tout le code qui n'était pas nécessaire et j'ai ajouté la bordure bleu.
Attention, si la largeur du tableau est trop petite, il ya un décalage sous Firefox (voir commentaires).

Il faut que tu t'assure que ta fonction php écrive bien les lignes :
Code:

1 2 3 4 5 6 7 <tr> <th scope="row">T3 4264</th> <td>ISLE OF MAN</td> <td>11:40</td> <td>11:42</td> </tr>
(tu peux remplacer le premier <th> par un <td>

Mais d'après ce que j'ai vu, tu met ce tableau dans une cellule d'un autre tableau ?

ok c'est bon, mes en tetes sont bien fixes et j'ai bien une barre de défilement, il me reste le dernier probleme, mes td ne sont toujours pas cohérentes avec mes th.

code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<tr>
		          <td class="td1">'.$lib_document.'</td>
				  <td class="td2">'.$chemin.'</td>
				  <td class="td3">Le <u>'.$date_der_modif.'</u> à '.$heure_der_modif.'</td>
				  <td class="td4">
				    <form action="action_ouverture_fichier.php" method="get">
 
					     <input type="hidden" value='.$code_doc.' name="code" />
                         <input type="submit" value="Ouvrir" name="ouvrir" />
 
                    </form>
				  </td>
				</tr>'

code HTML :

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
 
<table class="tableau_fichier" align="center">
	    <thead>
	    <tr>
		  <th class="th1" scope="col">
 
		    Libellé du document
 
	      </th>
		  <th class="th2" scope="col">
 
		    Emplacement du document
 
		  </th>
		  <th class="th3" scope="col">
 
		    Date de dernière modification
 
		  </th>
		  <th class="th4" scope="col">
 
		    Ouverture du document
 
	      </th>
		  </tr>
		</thead>
 
		<tbody>
 
		  <?php construire_tableau($login) ?>
 
		</tbody>
 
        </table>

CSS :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
.outer thead tr 
{
position:absolute;
top:0em;
height:1.5em;
left:0;
width : 820px;
margin:0 auto 0 auto;
}
 
.outer th, .outer td {
text-align:center;
}
 
 
.innera 
{
overflow:auto;
width : 820px;
height : 11.5em;
}
 
.th1
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 205px;
}
 
.th2
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 230px;
}
 
.th3
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 205px;
}
 
.th4
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 180px;
}
 
.td1
{
text-align : center;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 205px;
}
 
.td2
{
text-align : center;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 230px;
}
 
.td3
{
text-align : center;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 205px;
}
 
.td4
{
text-align : center;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 180px;
}

comme vous pouvez le voir j'ai essayé de donner la meme largeur a chacune de mes th et de mes td mais cela ne change rien, le résultat est toujours le meme : résultat

15/06/2006, 12h27
supermanu

Je pense que c'est à cause des noms de fichiers que tu as dans ton tableau.
Tant qu'il n'y a pas d'espace, il n'y a pas de retour à la ligne et les cellules du tableau s'agrandissent toutes seules. :roll:

Mais je pense qu'il existe un moyen pour que ce ne soit pas le cas...reste plus qu'à trouver... :roll:
15/06/2006, 13h02
supermanu
pour tes liens tu peux mettre un div avec un scroll bar et régler la taille :
Code:

1 2 <td><div style="overflow:auto;width:150px">ton lien</div></td<
15/06/2006, 13h08
charlene44

non je pense que je vais carément dégager les chemins d'accès de l'affichage, ca gene tout, et ca ne sert pas à grand chose.
15/06/2006, 14h06
charlene44

c'est bon, j'ai trouvé, en fait ca me décalait tout car j'ai un padding-left et un padding-right dans mes th et je ne les avait pas reproduit dans les td. maintenant tout fonctionne niquel, merci beaucoup!