Discussion :

[fabiofabio]

Bonjour, bonjour,

voila, je voudrais faire un scroll dans un tableau pour pouvoir garder les entêtes fixes et pouvoir scroller le contenu.

voici un code que j'ai récupéré qui fonctionne sur FF mais pas sur IE.

Avez-vous une idée pour que ça fonctionne sous IE ???

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type="text/css">
 
table {
 
   width:100%;
 
   border:1px solid #000000;     /* Juste histoire de voir le tableau */
 
}
 
thead {
 
   height: 50px;     /* Hauteur de tes entêtes */
 
}
 
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>
 
 <thead>
 
   <tr>
 
     <th>Entete1</th>
 
     <th>Entete2</th>
 
     <th>Entete3</th>
 
   </tr>
 
 </thead>
 
 <tbody>
 
   <tr>
 
     <td>Cellule1</td>
 
     <td>Cellule2 Cellule2</td>
 
     <td>Cellule3</td>
 
   </tr>
 
   <tr>
 
     <td>Cellule4</td>
 
     <td>Cellule5</td>
 
     <td>Cellule6</td>
 
   </tr>
 
   <tr>
 
     <td>Cellule7</td>
 
     <td>Cellule8</td>
 
     <td>Cellule9</td>
 
   </tr>
 
   <tr>
 
     <td>Cellule10</td>
 
     <td>Cellule11</td>
 
     <td>Cellule12 Cellule12 Cellule12</td>
 
   </tr>
 
   <tr>
 
     <td>Cellule13 Cellule13 Cellule13</td>
 
     <td>Cellule14 Cellule14 Cellule14</td>
 
     <td>Cellule15 Cellule15 Cellule15</td>
 
   </tr>
 
      <tr>
 
     <td>Cellule16</td>
 
     <td>Cellule17</td>
 
     <td>Cellule18</td>
 
   </tr>
 
   <tr>
 
     <td>Cellule19</td>
 
     <td>Cellule20</td>
 
     <td>bla bla bla bla bla bla bla bla  bla bla bla bla</td>
 
   </tr>
 
 </tbody>
 
</table>
 
</body>
 
</html>

[cedsun]

salut,

jette un coup d'oeil sur le 1er post, ici

[fabiofabio]

Merci beaucoup cedsun pour cette piste.
Il est vrai que le code fonctionne sur MF et IE

mais c'est quand même dingue, ces différences entre ces navigateurs

j'ai continué à chercher sur le moteur de recherche mais je n'ai pas trouvé grand chose

En fait , j'ai l'impression que l'on est obligé d'utiliser le commentaires conditionnels <!--[if IE]>

Je pense que je vais faire un CSS pour FF et un autre pour IE (Eh, oui c'est super IE!!! )

Avez-vous un exemple simple, juste pour utiliser un scroll dans un tableau de type table, ça serait sympa ???

PS : j'utilise IE 6.0 pour mes tests. Pfff

[PetCyr]

Bonjour,

j'ai le même problème mais le lien que cedsun a donné ne fonctionne plus. Apparement c'est possible alors...

Alors si quelqu'un peut me dépanner, par avance merci.

[cedsun]

Hello PetCyr,

De mon côté, le lien fonctionne bien...

Voici l'exemple de code au cas où... ça va peut-être t'aider :

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>website</title>
<style type='text/css'>
body{
padding:0;
margin: 20px;
font: normal 13px arial, sans-serif;
}
 
table.TableMain{
border: 1px solid black;
}
 
thead tr th, tfoot tr th{
background-color: #996600;
}
 
.scrollTable th, .scrollTable td{
padding: 5px;
border: solid black;
border-width: 0 1px 1px 0;
}
 
.scrollTable{ width:100% }
 
.scrollTable > tbody{
height:300px;
overflow:auto;
}
 
.scrollTable .th_extra{
width: 18px;
padding: 0;
border-right-width: 0;
}
 
.TableContainer > .scrollTable .th_extra{ width: 19px; }
 
</style>
<!--[if IE]>
<style type="text/css">
div.TableContainer {
height: 300px;
overflow: auto;
width: 100%;
}
 
thead.fixedHeader tr {
position: relative;
}
.scrollTable{width: expression(this.parentNode.offsetWidth-17);}
.th_extra{display:none;}
</style>
<![endif]-->
 
</head>
 
<body>
 
<table border='0' cellspacing='0' cellpadding='0' class='TableMain' width='60%'>
<tr>
<td>
<div class="TableContainer">
<table border='0' cellspacing='0' cellpadding='0' class="scrollTable">
<thead class="fixedHeader">
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>yg</th>
<th class='th_extra'></th>
</tr>
</thead>
<tfoot>
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>7</th>
<th class='th_extra'></th>
</tr>
</tfoot>
<tbody class="scrollContent">
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
</tbody>
</table>
</div>
 
</td>
</tr>
</table>
 
</body>
</html>