Thead (position:absolute) et (width 100%)

ms2003 · 09/12/2011, 16h52

Bonjour,
j'ai réalisé un scrolling sur un tableau tout en gardant l'entête fixe.
La largeur du tableau est égale à 100%, quelques colonnes ont une largeur fixe, les autres vont prendre le reste du 100%.
Je veux que les entêtes (TH) prennent toute la largeur du tableau, et que les colonnes (TD) respecte la largeur des entêtes (TH).
Merci à vous.

Voici le code :

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
 
<style>
#outer {
	padding-top:60px;
	width:100%;
	position:relative;
}
#inner {
	height:100px;
	overflow-x:hidden;
	overflow-y:auto;
	width:100%;
}
table{
	width:100%;
}
table thead {
	position:absolute;
	top:0;
	width:100%;
}
</style>
<div id="outer">
	<div id="inner">
		<table border="1">
			<thead>
				<tr>
					<th width="200">posuere urna</th>
					<th width="200">posuere urna</th>
					<th>posuere urna</th>
					<th>posuere urna</th>
					<th>posuere urna</th>
				</tr>
				<tr>
					<th>posuere urna</th>
					<th>posuere urna</th>
					<th>posuere urna</th>
					<th>posuere urna</th>
					<th>posuere urna</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
				<tr>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
					<td>posuere urna</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

Emyleen · 12/12/2011, 11h27

Bonjour!

J'ai réussi à faire ça, par contre il reste un petit défaut, il te faudra régler la taille de ton thead en fonction de la dimension de ta fenêtre (ou de ton bloc supérieur). A vérifier sur les navigateurs autre que Firefox.

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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
	margin: 0 10px;
	padding: 0;
}
table {
   width:100%;
   border: 1px solid #000000;
   border-top: 0;
   position: relative;
}
 
thead {
   position: fixed;
   display: table;
   width: 98.3%;
   background-color: #ffffff;
}
thead tr th:first-of-type {
	/*border-left: 1px solid black;	*/
}
thead tr th:last-of-type {
	border-right: 1px solid black;
}
thead tr:first-of-type th {
	border-top: 1px solid black;
}
thead tr:last-of-type th {
	border-bottom: 1px solid black;
}
 
tbody {
   height: 150px;        /* Hauteur du reste des données */
   overflow-y: auto;     /* Ton scroll vertical */
   overflow-x:hidden;    /* Scroll horizontal caché */
}
 
td {
   padding-right:10px     /* permet à tes infos de ne pas être caché par le scroll vertical, étant donné que l'horizontal est masqué  */
}
</style>
</head>
 
<body>
<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th width="200">posuere urna</th>
            <th width="200">posuere urna</th>
            <th>posuere urna</th>
            <th>posuere urna</th>
            <th>posuere urna</th>
        </tr>
        <tr>
            <th>posuere urna</th>
            <th>posuere urna</th>
            <th>posuere urna</th>
            <th>posuere urna</th>
            <th>posuere urna</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="5">&nbsp;</td>
        </tr>
        <tr>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
        </tr>
        <tr>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
        </tr>
        <tr>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
        </tr>
        <tr>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
            <td>posuere urna</td>
        </tr>
    </tbody>
</table>
</body>
</html>

ms2003 · 12/12/2011, 12h11

Merci Emyleen, mais les cellules (td et th) de la même colonne n'ont pas la même largeur !!
ainsi le scroll sur tbody fonctionne uniquement sous Firefox (c'est la raison pour laquelle j'ai utilisé cette solution).

12/12/2011, 12h11	#3
ms2003 Invité de passage Développeur Web Inscription : décembre 2011 Messages : 2 Détails du profil Informations personnelles : Sexe : Localisation : Tunisie Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : décembre 2011 Messages : 2 Points : 0 Points : 0	Merci Emyleen, mais les cellules (td et th) de la même colonne n'ont pas la même largeur !! ainsi le scroll sur tbody fonctionne uniquement sous Firefox (c'est la raison pour laquelle j'ai utilisé cette solution).
	00

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