pb avec un en tête de tableau qui bouge

**sissi25** · 06/07/2006, 13h27

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 :

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
 
<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

**Oluha** · 06/07/2006, 15h48

as-tu essayé de regarder comment ils font ici : http://www.imaputz.com/cssStuff/bigFourVersion.html ?

**sissi25** · 06/07/2006, 16h43

oui c'est justement de ce modéle que je me suis inspirée

**sissi25** · 07/07/2006, 13h45

personne ne veut regarder mon code ????

**sissi25** · 10/07/2006, 14h26

à l'aide, j'ai vraiment tout essayé ...

**masu** · 10/07/2006, 15h49

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

**sissi25** · 10/07/2006, 15h54

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

**masu** · 10/07/2006, 16h01

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 ?

**sissi25** · 10/07/2006, 16h05

voilà mon code html

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
 
<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

**masu** · 10/07/2006, 16h10

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.

**sissi25** · 10/07/2006, 16h18

Code :

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

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

**masu** · 10/07/2006, 16h32

premiere petite chose il te maque un ;

Code :

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

<thead class=fixedHeader><tr><th><a href=default.asp></a></th><th>&nbsp;</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

**sissi25** · 10/07/2006, 16h39

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?

**masu** · 10/07/2006, 16h45

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

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
 
/* 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

**sissi25** · 10/07/2006, 16h47

ok c'est ce que je vais essayé de faire
sinon il n'y a pas un moyen en utilisant des frames?

**dadg** · 13/07/2006, 10h21

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">

pb avec un en tête de tableau qui bouge

HTML

Discussions similaires

Partager

Partager