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

Invité · 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.

Invité · 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>

Invité · 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.

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

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager