Tableau avec une ligne d'en-tête et une colonne fixe [Sources]

**heddicmi** · 16/11/2006, 17h27

Bonjour à tous !

Je recontre des soucis actuellement. Ce que je souhaite, c'est pouvoir réaliser nu tableau html pour lequel une ligne (voir plusieurs) sera figé en haut, ainsi qu'une colonne à gauche : Une sorte de tableau à la tableur...

Je suis reparti d'une source permettant de fixer un ligne d'en-tête.

A partir de la, je comprends le principe de manipulation qui nous amène à deux divs, dont on se sert pour caler la 1ère ligne.

Lorsque je tente d'appliquer la même stratégie pour bloquer en même temps une colonne, c'est la catastrophe, je n'arrive à rien. Mon niveau le plus avancé était :
Mettre en place le tableau quasi formaté, avec les deux barres de défilement (horizontale et verticale). Mais je me buttais sur un truc con : Les barres de défilement était indisponible (certainement sous le calque global).

Pour l'instant, j'en suis donc resté, sans soucis à faire çà.

Si vous avez des indications sur comment bloquer la colonne "Ligne", je suis preneur !

Queslques codes de ma page :

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<body>
	<link rel="stylesheet" href="tableau_fixe.css">
</body>
 
<head>
	<div class="outerframe">
		<div class="innerframe">
			<table>
				<tr class="heads">
					<th>Ligne</th>
 
					<th>Alpha</th>
					<th>Beta</th>
					<th>Gamma</th>
					<th>Delta</th>
					<th>Epsilon</th>
					<th>Zeta</th>
 
				</tr>
				<tr>
					<td>1</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
 
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>2</td>
					<td>234.56</td>
					<td>345.67</td>
 
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>3</td>
 
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
 
				</tr>
				<tr>
					<td>4</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
 
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>5</td>
					<td>234.56</td>
					<td>345.67</td>
 
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>6</td>
 
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
 
				</tr>
				<tr>
					<td>7</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
 
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>8</td>
					<td>234.56</td>
					<td>345.67</td>
 
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>9</td>
 
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
 
				</tr>
				<tr>
					<td>10</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
 
					<td>234.56</td>
					<td>345.67</td>
				</tr>
			</table>
		</div><!-- innerframe -->
	</div><!-- outerframe -->
</head>
</html>

Et le CSS qui gère le tout :

Code CSS :

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
/*		fixedtableheads.css		*/
 
 
/*===================================*/
/* fixed table heads demo */
/*===================================*/
 
/* this element contains the entire table structure */
.outerframe
{
	position: relative;		/* to capture the absolutely positioned col heads */
	padding-top: 23px;		/* space for the col heads */
 
	/* arbitrary position of the structure on the page */
	margin: 25px;
 
	/* optional: width matches innerframe */
	width: 739px;
}
 
/* this enables the table to scroll without scrolling the page */
.innerframe
{
	position: static;	/* 'static' is the default position, but I've defined it explicitly to expose the logic: if it were relative or absolute this element would contain the col heads instead of releasing them to outerframe */
 
	overflow: scroll;	/* required */
	height: 200px;		/* height is required, its value arbitrary */
	width: 739px;		/* arbitrary, wide enough to contain the table */
 
	padding-left: 1px;	/* Mozilla hides the table's left border unless this is here */
}
 
.innerframe table
{
	position: static;	/* 'static' is the default position, but I've defined it explicitly to expose the logic: if it were relative or absolute this element would contain the col heads instead of releasing them to outerframe */
 
	/* optional */
	border-collapse: collapse;
}
 
.innerframe th,
.innerframe td
{
	width: 100px;			/* col heads must match with data columns; they don't have to all be the same width, but they must be fixed */
 
	border: 1px solid black;	/* optional */
}
 
/* position the row of column heads above the table */
.innerframe tr.heads
{
	position: absolute;		/* this throws the col heads out of the table and out of the innerframe, where they'll be captured inside the innerframe */
	top: 0px;
	left: 1px;	/* shift col heads right to match the innerframe's padding-left above */
}

Merci à vous !

**grabriel** · 20/11/2006, 00h41

Salut,

Tu as besoin d'une en-tete statique et d'une première colonne statique donc tu fais l'en-tete comme dans l'exemple et en dessous tu refais un div qui va contenir deux autres div, le premier sera ta première colonne et ton div "innerframe" qui contiendra ton tableau et qui aura un scroll.
Tu mets align:left dans tes deux <div> pour qu'ils s'affichent l'un à coté de l'autre.

**heddicmi** · 20/11/2006, 12h10

Merci de ta réponse ! Mais comme je ne suis pas l'expert en CSS, j'ai un peu de mal à comprendre.

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
	<div class="outerframe">
		<div class="test">
			<table>
				<tr>
					<td>1</td>
				</tr>
				<tr>
					<td>2</td>
				</tr>
				<tr>
					<td>3</td>
				</tr>
				<tr>
					<td>4</td>
				</tr>
				<tr>
					<td>5</td>
				</tr>
				<tr>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
				</tr>
				<tr>
					<td>8</td>
				</tr>
				<tr>
					<td>9</td>
				</tr>
				<tr>
					<td>10</td>
				</tr>
			</table>
		</div>
		<div class="innerframe">
			<table>
				<tr>
					<td>1</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
 
				[...]
 
			</table>
		</div><!-- innerframe -->
	</div><!-- outerframe -->

C'est une chose comme ça au final que tu vois ? Parceque je ne comprends pas ta phrase : "le premier sera ta première colonne".

**grabriel** · 20/11/2006, 18h53

Tu peux le copier coller dans un fichier html il fonctionne tel quel.... au niveau de la taille c'est pas trop ca donc faut ajuster....

T'as un div qui te sert de conteneur pour tout ton tableau "tableauentier"
dedans t'as un premier div qui doit faire toute la longueur et qui représente les en-tete de colonnes.

En dessous t'as deux div "colonne" et "tableauscroll" avec float:left qui te permet d'aligner les deux div sur une meme ligne, sinon le div se mettra sur la ligne d'en-dessous.
Et bien sûr dans tableauscroll le scroll avec overflow:auto;....

Après les width c'est pour essayer d'aligner le tout....

Tu peux toujours utiliser des div pour faire les cellules de ta table au lieu d'utiliser la balise <table>.

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
<html>
<head>
<style type="text/css">
.tableauentier{
	width:330px;
	height:150px;	
}
.colonne{
   float:left;
   width:50px;
}
.tableauscroll{
	width:234px;
	float:left;
	overflow:auto;
}
th{
	width:50px;
}
td{
	width:50px;	
}
</style>
</head><body>
 
	<div class="tableauentier">
	<div>
	   <table border="1">
		<tr>
			<th>Col1</th>
			<th>Col2</th>
			<th>Col3</th>
			<th>Col4</th>
			<th>Col5</th>
 
		</tr>
	    </table>
	</div>
	<div class="colonne">
			<table border="1">
				<tr>
					<td>1</td>
				</tr>
				<tr>
					<td>2</td>
				</tr>
				<tr>
					<td>3</td>
				</tr>
				<tr>
					<td>4</td>
				</tr>			
			</table>
		</div>
		<div class="tableauscroll">
			<table border = "1">
				<tr>
					<td>1</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
 				<tr>
					<td>1</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
 
				<tr>
					<td>1</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>[...]</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

**heddicmi** · 21/11/2006, 11h25

Le soucis ici vient du fait que la ligne d'en tête et la colonne fixe sont totalement dissociésdes données. De ce fait, cela bloque la navigation dans le tableau. Seul les données circulent, les entêtes ligne et colonne ne suivent pas.

Il faut que je réfléchisse ça autrement.

**trotters213** · 21/11/2006, 14h40

pour locker la colonne + la ligne d'entête tu peux t'inspirer de ça mais ça ne fonctionne que sous IE (sous FF et Opera, la première colonne bouge) mais tu peux toujours partir de ça pour l'améliorer.

**heddicmi** · 22/11/2006, 14h44

Changement de politique. Je suis repartis de 0...

Bien m'en a pris. trotters213, j'avais déjà consulté ce tableau qui ne m'avait pas convaincu.

Cependant, il m'a permis de retrouver une propriété scrolltop. Celle-ci permet de savoir de combien on a descendu la barre de défillement.

De ce fait, je me suis basé là dessus pour finir avec cette solution plutôt pas mal est répondant totalement à ma demande : La solution

Le principe donc :
Un gros div, avec une propriété cachant tout ce qui en dépasse.
A l'intérieur 4 autres div représentant chacun une partie du tableau (cellule centrale en haut à gauche, titre des colonnes, titre des lignes, données).
Chacun de ces divs contient un tableau avec les infos adéquats. Celui des données à une propriétés de scroll pour tout ce qui en dépasse.

Le div contenant les données réagis sur le onscroll afin de fournir, aux deux divs représentant les en-têtes de lignes et de colonnes, les nouvelles position par rapport au top et au left respectivent.

Bon, dit comme ça, c'est un peu pompeux.
En voici le code :

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
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
<html>
<head>
<style>
.general
{
        position: absolute;
 
        overflow: hidden;
 
        width: 400px;
        height:200px;
 
        border: 1px solid;
}
 
.titre
{
        width: 400px;
        height: 50px;
 
        background-color: #99CCCC;
}
 
.entete_l
{
        position: absolute;
 
        left: 100px;
        top: 0px;
 
        height: 50px;
 
        background-color: #99CCCC;
}
 
.entete_c
{
        position: absolute;
 
        top: 50px;
        left: 0px;
 
        width: 100px;
 
        background-color: #CCCCFF;
}
 
.donnees
{
        position: absolute;
        overflow: scroll;
 
        left: 100px;
        top: 50px;
 
        width: 300px;
        height: 150px;
 
        background-color: #9999CC;
}
</style>
 
<script type="text/javascript">
function doOnScroll(mondiv)
{
document.getElementById("colonne").style.top=(50-mondiv.scrollTop)+"px"
document.getElementById("ligne").style.left=(100-mondiv.scrollLeft)+"px"
}
</script>
</head>
 
<body>
<div class="general">
	<div z-index=1 class="titre">
		<table width=100 height=50 border=1>
			<tr>
				<td width=100>Titre</td>
			</tr>
		</table>
	</div>
	<div z-index=2 id="ligne" class="entete_l">
		<table width=500 height=50 border=1>
			<tr>
				<td width=100>Alpha</td>
				<td width=100>Beta</td>
				<td width=100>Gamma</td>
				<td width=100>Omega</td>
				<td width=100>Upsilon</td>
			</tr>
		</table>
	</div>
	<div z-index=1 id="colonne" class="entete_c">
		<table width=100 height=200 border=1>
			<tr height=50>
				<td>Ligne 1</td>
			</tr>
			<tr height=50>
				<td>Ligne 2</td>
			</tr>
			<tr height=50>
				<td>Ligne 3</td>
			</tr>
			<tr height=50>
				<td>Ligne 4</td>
			</tr>
		</table>
	</div>
	<div class="donnees" onscroll="doOnScroll(this);">
		<table width=500 height=200 border=1>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
		</table>
	</div>
</div>
</body>

Maintenant, c'est pas parfait, loin de là...

Et la principale, c'est bien évidement (vous l'aurez remarqué en testant) :
Le div en haut à gauche reste tout en dessous. Je n'ai toujours pas trouvé comment le faire passer au dessus. ainsi les 2 div d'en-têtes glisseront en dessosu et disparaitront.

Et le 2nd défaut, c'est que celà ne marche pas sous opera. J'aurais plutôt cru netscape, mais non.

Donc ça fonctionne sous FF, IE et Netscape.

Voilà, si vous avez une solution pour mon autre problème, je susi preneur !

Merci !

**trotters213** · 22/11/2006, 15h57

Voilà la résolution à ton problème :

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#general{
        position: absolute;
        overflow: hidden;
        width: 400px;
        height:200px;
        border: 1px solid;
}
 
#titre{
        position: absolute;
        left: 0px;
        top: 0px;
        height: 50px;
        background-color: #9CC;
        z-index:100; 
        width:100px;
}
 
#entete{
        position: absolute;
        left: 100px;
        top: 0px;
        height: 50px;
        background-color: #9CC;
        z-index:10;
}
 
#first_col {
        position: absolute;
        top: 50px;
        left: 0px;
        width: 100px;
        background-color: #CCF;
}
 
#the_table {
        position: absolute;
        overflow: scroll;
        left: 100px;
        top: 50px;
        width: 300px;
        height: 150px;
        background-color: #99C;
        z-index:10;
}
 
td{
width:100px;
border:1px solid #000; 
}
 
#titre table, 
#entete table,
#first_col table,
#the_table table{
border:1px solid #000; 
padding:1px;
}
 
#titre table{
width:100px; 
height:50px; 
}
 
#entete table{
width:500px; 
height:50px;
}
 
#first_col table{
width:100px; 
height:200px;
}
 
#the_table table{
width:500px; 
height:200px;
}
 
#the_table table tr {
height:50px;
}
</style>
 
<script type="text/javascript">
function doOnScroll(mondiv)
{
document.getElementById("colonne").style.top=(50-mondiv.scrollTop)+"px"
document.getElementById("ligne").style.left=(100-mondiv.scrollLeft)+"px"
}
</script>
</head>
 
<body>
<div id="general">
	<div id="titre">
		<table>
			<tr>
				<td>Titre</td>
			</tr>
		</table>
	</div>
	<div id="entete">
		<table>
			<tr>
				<td>Alpha</td>
				<td>Beta</td>
				<td>Gamma</td>
				<td>Omega</td>
				<td>Upsilon</td>
			</tr>
		</table>
	</div>
 
	<div id="first_col">
		<table>
			<tr>
				<td>Ligne 1</td>
			</tr>
			<tr>
				<td>Ligne 2</td>
			</tr>
 
			<tr>
				<td>Ligne 3</td>
			</tr>
			<tr>
				<td>Ligne 4</td>
			</tr>
		</table>
	</div>
 
	<div id="the_table" onscroll="doOnScroll(this);">
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
		</table>
	</div>
</div>
</body>

avec du CSS

[edit]quand tu définis un identifiant pour une seule utilisation, utilise id.
class est à utiliser lorsque tu vas utiliser plusieurs l'identifiant en question.

**heddicmi** · 22/11/2006, 16h31

Je suis en train d'étudier tes lignes...

Mais là, à brut de pomme, je sens un problème... (le copié coller de code, c'est relou, il mets tout sur une ligne...)

En tout cas, ma colonne et ma ligne d'en-tête ne bougent plus ? Chez toi, elle continue de moover

?

Je reviens pour en dire plus...

[EDIT]OK, j'ai rien dit

Tu avais changé les ids des div, donc du coup, le javascript avait plus de mal à le trouver

en fait, j'avais bien pensé à mettre des z-index, mais ça ne changais rien. il manquait en fait de mettre en position absolu le div du haut/gauche.

Merci à toi !

Mon code final :

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
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
<html>
<head>
<style>
.general
{
        position: absolute;
 
        overflow: hidden;
 
        width: 400px;
        height: 200px;
 
        border: 1px solid;
}
 
.titre
{
        position: absolute;
 
        top: 0px;
        left: 0px;
 
        width: 100px;
        height: 50px;
 
        background-color: #99CCCC;
}
 
.entete_l
{
        position: absolute;
 
        left: 100px;
        top: 0px;
 
        height: 50px;
 
        background-color: #99CCCC;
}
 
.entete_c
{
        position: absolute;
 
        top: 50px;
        left: 0px;
 
        width: 100px;
 
        background-color: #CCCCFF;
}
 
.donnees
{
        position: absolute;
        overflow: scroll;
 
        left: 100px;
        top: 50px;
 
        width: 300px;
        height: 150px;
 
        background-color: #9999CC;
}
</style>
 
<script type="text/javascript">
function doOnScroll(mondiv)
{
document.getElementById("colonne").style.top=(50-mondiv.scrollTop)+"px"
document.getElementById("ligne").style.left=(100-mondiv.scrollLeft)+"px"
}
</script>
</head>
 
<body>
<div class="general">
	<div style="z-index:100;" class="titre">
		<table width=100 height=50 border=1>
			<tr>
				<td width=100>Titre</td>
			</tr>
		</table>
	</div>
	<div style="z-index:10;" id="ligne" class="entete_l">
		<table width=500 height=50 border=1>
			<tr>
				<td width=100>Alpha</td>
				<td width=100>Beta</td>
				<td width=100>Gamma</td>
				<td width=100>Omega</td>
				<td width=100>Upsilon</td>
			</tr>
		</table>
	</div>
	<div style="z-index:10;" id="colonne" class="entete_c">
		<table width=100 height=200 border=1>
			<tr height=50>
				<td>Ligne 1</td>
			</tr>
			<tr height=50>
				<td>Ligne 2</td>
			</tr>
			<tr height=50>
				<td>Ligne 3</td>
			</tr>
			<tr height=50>
				<td>Ligne 4</td>
			</tr>
		</table>
	</div>
	<div style="z-index:10;" class="donnees" onscroll="doOnScroll(this);">
		<table width=500 height=200 border=1>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

et un exemple concret.

Je te suis pour tous ce qui est mis en forme, organisation CSS etc... Je ne le fait par sur cet exemple, mais je le ferais pour son utilisation réel que je commence de suite ![/EDIT]

**trotters213** · 22/11/2006, 17h14

Je m'étais concentré sur les entêtes sans voir l'intérieur du tableau.
Dans ce cas prend plutôt mon code (qui est bien propre que le tien

) et remplace ton javascript avec :

Code javascript :

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

1
2
document.getElementById("first_col").style.top=(50-mondiv.scrollTop)+"px"
document.getElementById("entete").style.left=(100-mondiv.scrollLeft)+"px"

**Bisûnûrs** · 22/11/2006, 17h18

Je pense qu'on peut mettre ce code dans les sources.

**heddicmi** · 22/11/2006, 18h45

Ok, donc ça fera 500 euros...

Koi pas drôle ?

bon blague à part, si ça peux rendre service à d'autre, no soucy... celà dit, elle est loin d'être cool comme ça...
De 1 : Marce pas sour Opéra (pas testé encore sous safari)
De 2 : On est obligé de tout bien définir les tailles à la main. Contraignant. A voir s'il n'y a pas moyen de rendre les tailles plus relative.

Si vous me laissez du temps je regarderais... en repartant du beau code de trotters

Tableau avec une ligne d'en-tête et une colonne fixe [Sources]

Tableau en CSS

Discussions similaires

Partager

Partager