fonction barre de defilement pour tableau

**charlene44** · 14/06/2006, 14h11

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 :

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

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

**gorgonite** · 14/06/2006, 14h21

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

**supermanu** · 14/06/2006, 14h23

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.

**charlene44** · 14/06/2006, 14h27

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

**supermanu** · 14/06/2006, 14h48

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

**charlene44** · 14/06/2006, 16h53

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 :

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

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

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

**supermanu** · 14/06/2006, 17h32

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

**charlene44** · 15/06/2006, 10h27

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 :

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

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

**supermanu** · 15/06/2006, 11h11

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 :

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

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 ?

**charlene44** · 15/06/2006, 12h23

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 :

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

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 :

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

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

**supermanu** · 15/06/2006, 12h27

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.

Mais je pense qu'il existe un moyen pour que ce ne soit pas le cas...reste plus qu'à trouver...

**supermanu** · 15/06/2006, 13h02

pour tes liens tu peux mettre un div avec un scroll bar et régler la taille :

Code :

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

1
2
 
<td><div style="overflow:auto;width:150px">ton lien</div></td<

**charlene44** · 15/06/2006, 13h08

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.

**charlene44** · 15/06/2006, 14h06

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!

fonction barre de defilement pour tableau

JavaScript

Discussions similaires

Partager

Partager