Scroll sur table

**Gorbi** · 16/04/2013, 16h29

Bonjour,
Je rencontre actuellement une difficulté lors de ma mise en place d'un long tableau. En effet du fait de sa taille je suis obligé de mettre en place un overflow, ce qui est déjà fait mais sur l'intégralité du tableau or j'aimerais que les entêtes (la première ligne comprenant les noms des champs) restent en haut et ainsi ne soient pas comprises dans l'overflow.

J'ai essayé de jouer avec les thead et tbody mais rien n'y fait, je dois mal maîtriser la chose.

Voici le code que j'ai fait et qui pour l'instant englobe l'intégralité du tableau dans l'overflow.

Code :

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

1
2
3
<style type="text/css">
			div#recup{overflow:auto;position:absolute;bottom:153px;top:70px}
		</style type="text/css">

Code html :

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
<div id="recup">
		<table align="center" border="1">
 
			<thead>
				<tr align="center">
					<td style="border:2px solid black;font-size:0.8em;"><b>Poste Source</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>BASE</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>N ACT</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>N AT</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>N AR</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>N Acces Simple</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>N NIP</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Entreprise</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Intervenant</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Type de travaux</b></td>
					<td style="border:2px solid black;font-size:0.em;"><b>Exploitant</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Personne delivrant<br/>AC AT AR</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Date debut</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Date de fin prevue</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Date de fin</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Alerte</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Telephone CDT</b></td>
					<td style="border:2px solid black;font-size:0.8em;"><b>Commentaires</b></td>
					<?php if (isset($_SESSION['pseudo']) && isset($_SESSION['pass'])){ ?>
					<td colspan="2" style="border:2px solid black;font-size:0.8em;"><b>Modifier / Supprimer</b></td> <?php } ?>
 
				</tr>
			</thead><?php
                                $strSQL = "SELECT * FROM ac_at ";
                                $rs = mysql_query($strSQL);
                                while($row = mysql_fetch_array($rs)) 
                                {  if($row['Date_fin'] == '' )  
                                        {  $mycolor = 'red';}   else   {  $mycolor = 'green'; }  ?>
			<tbody>
				<tr border="1" align="center">
					<div id="recup">
					<td style="font-size:0.8em;"><?php echo $row['Poste_Source']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['BASE']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php if($row['N_ACT']==0) echo ""; else echo $row['N_ACT']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php if($row['N_AT']==0) echo ""; else echo $row['N_AT']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php if($row['N_AR']==0) echo ""; else echo $row['N_AR']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php if($row['N_acces_simple']==0) echo ""; else echo $row['N_acces_simple']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php if($row['N_NIP']==0) echo ""; else echo $row['N_NIP']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Entreprise']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Intervenant']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Type_de_travaux']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Exploitant']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Pers_del_AC_AT_AR']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Date_debut']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Date_fin_prevue']."<br/>";?></td>
					<td style="font-size:0.8em;background-color:<?php echo $mycolor;?>"><?php echo $row['Date_fin']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php $decompo1 = explode("/",$row['Date_fin_prevue']); $decompo2 = explode("/",$row['Date_fin']);$date = explode("-",date("d-m-Y"));
                                                if(isset($row['Date_fin'])&&empty($row['Date_fin'])){
                                                        if($decompo1[2]==$date[2] && $decompo1[1]==$date[1] && $decompo1[0]>$date[0]){ echo"<img src=\"img/error_button_3.png\" width=\"20\" height=\"20\"/>";}
                                                        if($decompo1[2]==$date[2] && $decompo1[1]==$date[1] && $decompo1[0]<$date[0]){ echo"<img src=\"img/error_button_2.png\" width=\"20\" height=\"20\"/>";}
                                                        if($decompo1[2]==$date[2] && $decompo1[1]<$date[1]){ echo"<img src=\"img/error_button_2.png\" width=\"20\" height=\"20\"/>";}
                                                        if($decompo1[2]==$date[2] && $decompo1[1]>$date[1]){ echo"<img src=\"img/error_button_3.png\" width=\"20\" height=\"20\"/>";}
                                                        if($decompo1[2]<$date[2]) { echo"<img src=\"img/error_button_2.png\" width=\"20\" height=\"20\"/>";}
                                                        if($decompo1[2]>$date[2]) { echo"<img src=\"img/error_button_3.png\" width=\"20\" height=\"20\"/>";}
                                                }
                                        ?></td>
					<td style="font-size:0.8em;"><?php echo $row['Telephone_CDT']."<br/>";?></td>
					<td style="font-size:0.8em;"><?php echo $row['Commentaires']."<br/>";?></td>
						<?php if (isset($_SESSION['pseudo']) && isset($_SESSION['pass'])){
                                        $id_mod = $row['id']; ?> 
					<td><a href="?idPersonne=<?php echo $id_mod?>#index">Modifier</a></td>
					<td><a href="delete.php?idPersonne=<?php echo $id_mod?>">Suppprimer</a></td>
					<?php } 
                                        
                                }       
                        ?>
				</tr>
				</div>
			</tbody>
		</table>
 
<div id ="index"></div>

**Safi_heram** · 22/04/2013, 18h26

Salut,

D'abord une div dans un tr directement sans qu'elle soit dans un <td> ce n'est conforme ,suggestion pourquoi ne pas mettre les entêtes dans un tableau distinct et un autre suggestion pourquoi ne pas mettre tous tes champs dans des div et tu auras plus de Control que des tables car d’après tes champs le tableau il sera pas la bonne balise choisir.

et si tu veux faire des tableaux un peu compliqué coté affichage voila un lien qui pourra t'aider :

http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx

Scroll sur table

Défilement en CSS

Discussions similaires

Partager

Partager