pb avec un en tête de tableau qui bouge

Version imprimable

J'ai essayé de fixer mon en tête de tableau pour que l'intitule des colonnes ne bougent pas quand on scroll mais mon en tête bouge toujours

voici mon code

Code:

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
 
<style type="text/css">
div.tableContainer {
        clear: both;
        border: 1px solid #963;
        height: 285px;
        overflow: auto;
        width: 756px
}
 
html>body div.tableContainer {
        overflow: hidden;
        width: 756px
}
 
 
div.tableContainer table {
        float: left;
        width: 740px
}
 
 
html>body div.tableContainer table {
        width: 756px
}
 
 
thead.fixedHeader tr {
        position: relative
}
 
 
html>body thead.fixedHeader tr {
        display: block
}
thead.fixedHeader th {
                border-left: 1px solid #EB8;
        border-right: 1px solid #B74;
        border-top: 1px solid #EB8;
        font-weight: normal;
        padding: 4px 3px;
        text-align: left
}
 
 
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
        color: #FFF;
        display: block;
        text-decoration: none;
        width: 100%
}
 
 
thead.fixedHeader a:hover {
        color: #FFF;
        display: block;
        text-decoration: underline;
        width: 100%
}
 
html>body tbody.scrollContent {
        display: block;
        height: 262px;
        overflow: auto;
        width: 100%
}
 
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
        background: #FFF;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 4px
}
 
tbody.scrollContent tr.alternateRow td {
        background: #EEE;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 4px
}
 
html>body thead.fixedHeader th {
        width: 200px
}
 
html>body thead.fixedHeader th + th {
        width: 240px
}
 
html>body thead.fixedHeader th + th + th {
        width: 316px
}
 
 
html>body tbody.scrollContent td {
        width: 200px
}
 
html>body tbody.scrollContent td + td {
        width: 240px
}
 
html>body tbody.scrollContent td + td + td {
        width: 300px
}
</style>
 
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
 
<%
'Connexion a la BDD
 
Response.Write "<thead class=fixedHeader><tr><th> ...</th> ... </thead>
 
'requete
 
do while not rs1.EOF 
Response.Write "<tbody class=scrollContent><tr ... </tbody>
loop
...

merci

06/07/2006, 14h48
Oluha

as-tu essayé de regarder comment ils font ici : http://www.imaputz.com/cssStuff/bigFourVersion.html ?
06/07/2006, 15h43
sissi25

oui c'est justement de ce modéle que je me suis inspirée
07/07/2006, 12h45
sissi25

personne ne veut regarder mon code ???? :marteau:
10/07/2006, 13h26
sissi25

à l'aide, j'ai vraiment tout essayé ... :arf:
10/07/2006, 14h49
masu

donne nous un exemple de ton code html generé par ton script.
le tbody doit etre hors de la boucle il me semble.
si tes th n'ont pas de lien il faut peu etre rajouter display: block a thead.fixedHeader th
10/07/2006, 14h54
sissi25

j'ai mis le tbody hors de la boucle mais ca ne fonctionne toujours pas
mes th ont des liens

ce que je ne comprend pas c'est que la scrollbarre est sur tout le tableau et pas que sur la partie ou il y a le tbody

merci
10/07/2006, 15h01
masu

peu tu nous donner un bout de ton code HTML car vu que tu a repris texto le css de l'exemple je pense qu'il n'y a pas de bug a ce niveau la.

As-tu essayé de valider ton code html sur w3.org?
le code html que tu obtien par ton script ressemble-il a celui de l'exemple ?

voilà mon code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
 
<%
'Connexion a la BDD
 
Response.Write "<thead class=fixedHeader><tr><th> ...</th> ... </thead>
 
'requete
 
do while not rs1.EOF 
Response.Write "<tbody class=scrollContent><tr ... </tbody>
loop
...

non je n'ai pas essayé de valider mon code html
sinon oui le code html que j'obtient ressemble à celui de l'exemple

10/07/2006, 15h10
masu

enfait j'aimerai voir le HTML que ton script genere, c'est a dire ce que tu voi quand dans ton navigateur tu fait voir la source.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
 
<thead class=fixedHeader><tr><th><a href=default.asp></a></th><th>&nbsp</th></tr></thead>
<tbody class=scrollContent>
<tr><td>Pc Direct</td><td>01/08/2006</td></tr>
<tr><td>Pc Mag</td><td>01/08/2006</td></tr>
<tr><td>Pc Magazine</td><td>01/08/2006</td></tr>
....
</tbody>
 
</table>
</div>

merci de ton aide

10/07/2006, 15h32
masu

premiere petite chose il te maque un ;

Code:

<thead class=fixedHeader><tr><th><a href=default.asp></a></th><th> </th></tr></thead>

deuxiemement le probleme vien que tu n'a que deux colonne (3dans l'exemple) donc il va faloir adapter les valeurs des widths du css
10/07/2006, 15h39
sissi25

en faite j'ai onze colonnes
je t'ai pas tout mis parce que cela faisait beaucoup de code

comment je fais pour adapter les widths dans le CSS?

exemple avec les 2 colonne que tu m'a donné

Code:

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
 
/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 350px
}
 
html>body thead.fixedHeader th + th {
	width: 496px
}
 
/*html>body thead.fixedHeader th + th + th {
	width: 316px
}*/
 
/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 358px
}
 
html>body tbody.scrollContent td + td {
	width: 390px
}
 
/*html>body tbody.scrollContent td + td + td {
	width: 300px
}*/

pour 11 colonnes ca va etre un peut de la folie
le dernier selecteur sera:
html>body tbody.scrollContent td + td + td + td + td + td + td + td + td + td + td
peu etre que tu devrai essayer de generer le css dynamiquement aussi ;)

10/07/2006, 15h47
sissi25

ok c'est ce que je vais essayé de faire
sinon il n'y a pas un moyen en utilisant des frames?
13/07/2006, 09h21
dadg

Est-ce que tu as bien mis le doctype en haut de ta page html ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">