固定表头和列
1
<html>
2<head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4 <title>固定表头和列</title>
5
<style>
6
.FixedTitleRow
7
{
8 position: relative;
9 top: expression(this.offsetParent.scrollTop);
10 z-index: 10;
11 background-color: #E6ECF0;
12
}
13
14 .FixedTitleColumn
15 {
16 position: relative;
17 left: expression(this.parentElement.offsetParent.scrollLeft);
18 }
19
20 .FixedDataColumn
21 {
22 position: relative;
23 left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
24 background-color: #E6ECF0;
25 }
26
</style>
27</head>
28<body>
29 <div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
30 position: absolute; height: 200px;">
31 <table id='accountTable' width='500' height='330' cellpadding='0' cellspacing='0'
32 style='table-layout: auto' bordercolor='lightgrey'>
33 <tbody>
34 <tr class="FixedTitleRow">
35 <td class="FixedTitleColumn">
36 姓名</td>
37 <td class="FixedTitleColumn">
38 单位</td>
39 <td class="FixedTitleColumn">
40 工资</td>
41 <td>
42 Descirption0</td>
43 <td>
44 TOL0</td>
45 <td>
46 XS0</td>
47 <td >
48 SS0</td>
49 <td>
50 MS0</td>
51 <td>
52 DS0</td>
53 <td>
54 BS0</td>
55 <td>
56 XL0</td>
57 <td>
58 ML0</td>
59 <td>
60 DL0</td>
61 <td>
62 EM0</td>
63 <td>
64 BM0</td>
65 </tr>
66 <tr>
67 <td class="FixedDataColumn">
68 赖文华</td>
69 <td class="FixedDataColumn">
70 北京中油瑞飞</td>
71 <td >
72 9999RMB</td>
73 <td >
74 88</td>
75 <td >
76 88</td>
77 <td>
78 22</td>
79 <td>
80 22</td>
81 <td>
82 22</td>
83 <td>
84 22</td>
85 <td>
86 22</td>
87 <td>
88 22</td>
89 <td>
90 22</td>
91 <td>
92 22</td>
93 <td>
94 22</td>
95 <td>
96 22</td>
97 </tr>
98 <tr>
99 <td class="FixedDataColumn">
100 赖文华</td>
101 <td class="FixedDataColumn">
102 北京中油瑞飞</td>
103 <td >
104 9999RMB</td>
105 <td >
106 88</td>
107 <td >
108 88</td>
109 <td>
110 22</td>
111 <td>
112 22</td>
113 <td>
114 22</td>
115 <td>
116 22</td>
117 <td>
118 22</td>
119 <td>
120 22</td>
121 <td>
122 22</td>
123 <td>
124 22</td>
125 <td>
126 22</td>
127 <td>
128 22</td>
129 </tr>
130 <tr>
131 <td class="FixedDataColumn">
132 赖文华</td>
133 <td class="FixedDataColumn">
134 北京中油瑞飞</td>
135 <td >
136 9999RMB</td>
137 <td >
138 88</td>
139 <td >
140 88</td>
141 <td>
142 22</td>
143 <td>
144 22</td>
145 <td>
146 22</td>
147 <td>
148 22</td>
149 <td>
150 22</td>
151 <td>
152 22</td>
153 <td>
154 22</td>
155 <td>
156 22</td>
157 <td>
158 22</td>
159 <td>
160 22</td>
161 </tr>
162 <tr>
163 <td class="FixedDataColumn">
164 赖文华</td>
165 <td class="FixedDataColumn">
166 北京中油瑞飞</td>
167 <td >
168 9999RMB</td>
169 <td >
170 88</td>
171 <td >
172 88</td>
173 <td>
174 22</td>
175 <td>
176 22</td>
177 <td>
178 22</td>
179 <td>
180 22</td>
181 <td>
182 22</td>
183 <td>
184 22</td>
185 <td>
186 22</td>
187 <td>
188 22</td>
189 <td>
190 22</td>
191 <td>
192 22</td>
193 </tr>
194 <tr>
195 <td class="FixedDataColumn">
196 赖文华</td>
197 <td class="FixedDataColumn">
198 北京中油瑞飞</td>
199 <td >
200 9999RMB</td>
201 <td >
202 88</td>
203 <td >
204 88</td>
205 <td>
206 22</td>
207 <td>
208 22</td>
209 <td>
210 22</td>
211 <td>
212 22</td>
213 <td>
214 22</td>
215 <td>
216 22</td>
217 <td>
218 22</td>
219 <td>
220 22</td>
221 <td>
222 22</td>
223 <td>
224 22</td>
225 </tr>
226 <tr>
227 <td class="FixedDataColumn">
228 赖文华</td>
229 <td class="FixedDataColumn">
230 北京中油瑞飞</td>
231 <td >
232 9999RMB</td>
233 <td >
234 88</td>
235 <td >
236 88</td>
237 <td>
238 22</td>
239 <td>
240 22</td>
241 <td>
242 22</td>
243 <td>
244 22</td>
245 <td>
246 22</td>
247 <td>
248 22</td>
249 <td>
250 22</td>
251 <td>
252 22</td>
253 <td>
254 22</td>
255 <td>
256 22</td>
257 </tr>
258 <tr>
259 <td class="FixedDataColumn">
260 赖文华</td>
261 <td class="FixedDataColumn">
262 北京中油瑞飞</td>
263 <td >
264 9999RMB</td>
265 <td >
266 88</td>
267 <td >
268 88</td>
269 <td>
270 22</td>
271 <td>
272 22</td>
273 <td>
274 22</td>
275 <td>
276 22</td>
277 <td>
278 22</td>
279 <td>
280 22</td>
281 <td>
282 22</td>
283 <td>
284 22</td>
285 <td>
286 22</td>
287 <td>
288 22</td>
289 </tr>
290 <tr>
291 <td class="FixedDataColumn">
292 赖文华</td>
293 <td class="FixedDataColumn">
294 北京中油瑞飞</td>
295 <td >
296 9999RMB</td>
297 <td >
298 88</td>
299 <td >
300 88</td>
301 <td>
302 22</td>
303 <td>
304 22</td>
305 <td>
306 22</td>
307 <td>
308 22</td>
309 <td>
310 22</td>
311 <td>
312 22</td>
313 <td>
314 22</td>
315 <td>
316 22</td>
317 <td>
318 22</td>
319 <td>
320 22</td>
321 </tr>
322 <tr>
323 <td class="FixedDataColumn">
324 赖文华</td>
325 <td class="FixedDataColumn">
326 北京中油瑞飞</td>
327 <td >
328 9999RMB</td>
329 <td >
330 88</td>
331 <td >
332 88</td>
333 <td>
334 22</td>
335 <td>
336 22</td>
337 <td>
338 22</td>
339 <td>
340 22</td>
341 <td>
342 22</td>
343 <td>
344 22</td>
345 <td>
346 22</td>
347 <td>
348 22</td>
349 <td>
350 22</td>
351 <td>
352 22</td>
353 </tr>
354 <tr>
355 <td class="FixedDataColumn">
356 赖文华</td>
357 <td class="FixedDataColumn">
358 北京中油瑞飞</td>
359 <td >
360 9999RMB</td>
361 <td >
362 88</td>
363 <td >
364 88</td>
365 <td>
366 22</td>
367 <td>
368 22</td>
369 <td>
370 22</td>
371 <td>
372 22</td>
373 <td>
374 22</td>
375 <td>
376 22</td>
377 <td>
378 22</td>
379 <td>
380 22</td>
381 <td>
382 22</td>
383 <td>
384 22</td>
385 </tr>
386 </tbody>
387 </table>
388 </div>
389
390</body>
391</html>
392
<html>2
<head>3
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">4
<title>固定表头和列</title>5
<style>
6
.FixedTitleRow7
{
8
position: relative; 9
top: expression(this.offsetParent.scrollTop); 10
z-index: 10;11
background-color: #E6ECF0;12
}13
14
.FixedTitleColumn15
{16
position: relative; 17
left: expression(this.parentElement.offsetParent.scrollLeft);18
}19
20
.FixedDataColumn21
{22
position: relative;23
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);24
background-color: #E6ECF0;25
}26
</style>27
</head>28
<body>29
<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;30
position: absolute; height: 200px;">31
<table id='accountTable' width='500' height='330' cellpadding='0' cellspacing='0'32
style='table-layout: auto' bordercolor='lightgrey'>33
<tbody>34
<tr class="FixedTitleRow">35
<td class="FixedTitleColumn">36
姓名</td>37
<td class="FixedTitleColumn">38
单位</td>39
<td class="FixedTitleColumn">40
工资</td>41
<td>42
Descirption0</td>43
<td>44
TOL0</td>45
<td>46
XS0</td>47
<td >48
SS0</td>49
<td>50
MS0</td>51
<td>52
DS0</td>53
<td>54
BS0</td>55
<td>56
XL0</td>57
<td>58
ML0</td>59
<td>60
DL0</td>61
<td>62
EM0</td>63
<td>64
BM0</td>65
</tr>66
<tr>67
<td class="FixedDataColumn">68
赖文华</td>69
<td class="FixedDataColumn">70
北京中油瑞飞</td>71
<td >72
9999RMB</td>73
<td >74
88</td>75
<td >76
88</td>77
<td>78
22</td>79
<td>80
22</td>81
<td>82
22</td>83
<td>84
22</td>85
<td>86
22</td>87
<td>88
22</td>89
<td>90
22</td>91
<td>92
22</td>93
<td>94
22</td>95
<td>96
22</td>97
</tr>98
<tr>99
<td class="FixedDataColumn">100
赖文华</td>101
<td class="FixedDataColumn">102
北京中油瑞飞</td>103
<td >104
9999RMB</td>105
<td >106
88</td>107
<td >108
88</td>109
<td>110
22</td>111
<td>112
22</td>113
<td>114
22</td>115
<td>116
22</td>117
<td>118
22</td>119
<td>120
22</td>121
<td>122
22</td>123
<td>124
22</td>125
<td>126
22</td>127
<td>128
22</td>129
</tr>130
<tr>131
<td class="FixedDataColumn">132
赖文华</td>133
<td class="FixedDataColumn">134
北京中油瑞飞</td>135
<td >136
9999RMB</td>137
<td >138
88</td>139
<td >140
88</td>141
<td>142
22</td>143
<td>144
22</td>145
<td>146
22</td>147
<td>148
22</td>149
<td>150
22</td>151
<td>152
22</td>153
<td>154
22</td>155
<td>156
22</td>157
<td>158
22</td>159
<td>160
22</td>161
</tr>162
<tr>163
<td class="FixedDataColumn">164
赖文华</td>165
<td class="FixedDataColumn">166
北京中油瑞飞</td>167
<td >168
9999RMB</td>169
<td >170
88</td>171
<td >172
88</td>173
<td>174
22</td>175
<td>176
22</td>177
<td>178
22</td>179
<td>180
22</td>181
<td>182
22</td>183
<td>184
22</td>185
<td>186
22</td>187
<td>188
22</td>189
<td>190
22</td>191
<td>192
22</td>193
</tr>194
<tr>195
<td class="FixedDataColumn">196
赖文华</td>197
<td class="FixedDataColumn">198
北京中油瑞飞</td>199
<td >200
9999RMB</td>201
<td >202
88</td>203
<td >204
88</td>205
<td>206
22</td>207
<td>208
22</td>209
<td>210
22</td>211
<td>212
22</td>213
<td>214
22</td>215
<td>216
22</td>217
<td>218
22</td>219
<td>220
22</td>221
<td>222
22</td>223
<td>224
22</td>225
</tr>226
<tr>227
<td class="FixedDataColumn">228
赖文华</td>229
<td class="FixedDataColumn">230
北京中油瑞飞</td>231
<td >232
9999RMB</td>233
<td >234
88</td>235
<td >236
88</td>237
<td>238
22</td>239
<td>240
22</td>241
<td>242
22</td>243
<td>244
22</td>245
<td>246
22</td>247
<td>248
22</td>249
<td>250
22</td>251
<td>252
22</td>253
<td>254
22</td>255
<td>256
22</td>257
</tr>258
<tr>259
<td class="FixedDataColumn">260
赖文华</td>261
<td class="FixedDataColumn">262
北京中油瑞飞</td>263
<td >264
9999RMB</td>265
<td >266
88</td>267
<td >268
88</td>269
<td>270
22</td>271
<td>272
22</td>273
<td>274
22</td>275
<td>276
22</td>277
<td>278
22</td>279
<td>280
22</td>281
<td>282
22</td>283
<td>284
22</td>285
<td>286
22</td>287
<td>288
22</td>289
</tr>290
<tr>291
<td class="FixedDataColumn">292
赖文华</td>293
<td class="FixedDataColumn">294
北京中油瑞飞</td>295
<td >296
9999RMB</td>297
<td >298
88</td>299
<td >300
88</td>301
<td>302
22</td>303
<td>304
22</td>305
<td>306
22</td>307
<td>308
22</td>309
<td>310
22</td>311
<td>312
22</td>313
<td>314
22</td>315
<td>316
22</td>317
<td>318
22</td>319
<td>320
22</td>321
</tr>322
<tr>323
<td class="FixedDataColumn">324
赖文华</td>325
<td class="FixedDataColumn">326
北京中油瑞飞</td>327
<td >328
9999RMB</td>329
<td >330
88</td>331
<td >332
88</td>333
<td>334
22</td>335
<td>336
22</td>337
<td>338
22</td>339
<td>340
22</td>341
<td>342
22</td>343
<td>344
22</td>345
<td>346
22</td>347
<td>348
22</td>349
<td>350
22</td>351
<td>352
22</td>353
</tr>354
<tr>355
<td class="FixedDataColumn">356
赖文华</td>357
<td class="FixedDataColumn">358
北京中油瑞飞</td>359
<td >360
9999RMB</td>361
<td >362
88</td>363
<td >364
88</td>365
<td>366
22</td>367
<td>368
22</td>369
<td>370
22</td>371
<td>372
22</td>373
<td>374
22</td>375
<td>376
22</td>377
<td>378
22</td>379
<td>380
22</td>381
<td>382
22</td>383
<td>384
22</td>385
</tr>386
</tbody>387
</table>388
</div>389
390
</body>391
</html>392
