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

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

Citation:

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

28/07/2011, 17h21	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 305 Détails du profil Informations personnelles : Âge : 31 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 305 Points : 4 485 Points : 4 485	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.
	00

29/07/2011, 08h23	#3
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Regarde : http://www.developpez.net/forums/d46...u-entete-fixe/ tu as ta solution
	10

29/07/2011, 11h25	#4
xouzi Membre régulier Inscription : janvier 2011 Messages : 283 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 283 Points : 96 Points : 96	Si je met les <div style="overflow:auto;" ><table></table></div> sa ne fonctionne pas non plus
	00

29/07/2011, 11h53	#6
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Argh... je n'avais pas testé sur ie... La solution consisterait à intégrer le contenu de ton tableau dans un iframe.
	00

29/07/2011, 11h56	#7
xouzi Membre régulier Inscription : janvier 2011 Messages : 283 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 283 Points : 96 Points : 96	Oui j'ai regardé le lien mais je le comprend pas en plus je suis nul en anglais
	00

01/08/2011, 22h26	#10
xouzi Membre régulier Inscription : janvier 2011 Messages : 283 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 283 Points : 96 Points : 96	J'ai choisi la dernier solution j'ai essayé avec l'autre sa fonctionne aussi
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email