Entête de tableau qui doit rester afficher quand on défile la page

**xouzi** · 28/07/2011, 16h43

Bonjour

J'aimerai que l’entête de mon tableau me suive quand je descend en bas de la page d’après mes recherches il faut que j'utilise overflow:auto; mais je n'arrive pas à le faire fonctionner. Je l'ai mis avant mon tableau et aucun effet

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
 
<table cellpadding="0" cellspacing="0" id="tb_s" class="tb_s">				
	<tr>
		<div style="overflow:auto;" >
			<th bgcolor="#C0C0C0" class="tb"><nobr>Num</nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>Nom</nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>Prénom</nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>Adresse</nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>Ville </nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>CP</nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>Téléphone </nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>email</nobr></th>
			<th bgcolor="#C0C0C0" class="tb"><nobr>Date naissance</nobr></th>
		</div>	
	</tr>

**Vil'Coyote** · 28/07/2011, 17h21

un div dans un table avec des TH c'est pas près de marcher. ça ne fonctionnera que si ton div est en dehors de ton tableau.

**Gaetan_** · 29/07/2011, 08h23

Regarde :
http://www.developpez.net/forums/d46...u-entete-fixe/

tu as ta solution

**xouzi** · 29/07/2011, 11h25

Si je met les <div style="overflow:auto;" ><table></table></div> sa ne fonctionne pas non plus

**Vil'Coyote** · 29/07/2011, 11h53

Envoyé par xouzi

Si je met les <div style="overflow:auto;" ><table></table></div> sa ne fonctionne pas non plus

as tu pris le temps de lire l'exemple donné dans le lien de Gaetan_
http://www.imaputz.com/cssStuff/bigFourVersion.html

**Gaetan_** · 29/07/2011, 11h53

Argh... je n'avais pas testé sur ie...

La solution consisterait à intégrer le contenu de ton tableau dans un iframe.

**xouzi** · 29/07/2011, 11h56

Oui j'ai regardé le lien mais je le comprend pas en plus je suis nul en anglais

**Gaetan_** · 29/07/2011, 13h28

Ben oui le tout internet est anglais

Regarde cet exemple, insère le dans une page html, tu comprendras

Code :

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

<iframe src="http://google.fr" height="500" width="400"></iframe>

Tu peux personnaliser les bords etc.... en css.

Imagine qu'en haut du cadre tu colles ton entête et dans ton iframe le contenu du tableau.

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
<table cellpadding="0" cellspacing="0" id="tb_s" class="tb_s">				
<tr>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Num</nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Nom</nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Prénom</nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Adresse</nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Ville </nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>CP</nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Téléphone </nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>email</nobr></th>
		<th bgcolor="#C0C0C0" class="tb"><nobr>Date naissance</nobr></th>
</tr>
<TR height="500">
<TD COLSPAN="9"><iframe src="montableau.php" height="500" width="100%"></iframe></TD>
</TR>
</TABLE>

Attention à ta dernière colonne "Date naissance" prévois la largeur en tenant compte de la barre de défilement du tableau.

**Auteur** · 29/07/2011, 14h54

bonjour,

une autre solution est de faire deux tableaux : le premier pour les titres et le second pour les données.

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
 
<html>
<head>
</head>
<body>
<table border="1" style="width:500px">
<tr>
	<td>Titre1</td>
	<td>Titre2</td>
	<td>Titre3</td>
	<td>Titre4</td>
</tr>
</table>	
 
<div style="overflow:auto; height:100px; width:520px">
<table border="1" style="width:500px">
<tr>
	<td>bla bla1</td>
	<td>bla bla2</td>
	<td>bla bla3</td>
	<td>bla bla4</td>
</tr>
<tr>
	<td>bla bla1</td>
	<td>bla bla2</td>
	<td>bla bla3</td>
	<td>bla bla4</td>
</tr>
<tr>
	<td>bla bla1</td>
	<td>bla bla2</td>
	<td>bla bla3</td>
	<td>bla bla4</td>
</tr>
<tr>
	<td>bla bla1</td>
	<td>bla bla2</td>
	<td>bla bla3</td>
	<td>bla bla4</td>
</tr>
<tr>
	<td>bla bla1</td>
	<td>bla bla2</td>
	<td>bla bla3</td>
	<td>bla bla4</td>
</tr>
<tr>
	<td>bla bla1</td>
	<td>bla bla2</td>
	<td>bla bla3</td>
	<td>bla bla4</td>
</tr>
</table>	
</body>
</html>

Les deux tableaux ont la même largeur (500px) Par contre le div contenant le second tableau est légèrement plus grand pour laisser la place à la scrollbar. (sinon tu as une barre horizontale).

**xouzi** · 01/08/2011, 22h26

J'ai choisi la dernier solution j'ai essayé avec l'autre sa fonctionne aussi

Entête de tableau qui doit rester afficher quand on défile la page

HTML

Discussions similaires

Partager

Partager