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