1<html>
2<head>
3<style>
4table#headers {table-layout:fixed;background:#eea033;}
5table#data {table-layout:relative;background:#eea033;}
6td, th {vertical-align:top;background:#ffffff;}
7</style>
8<script language="javascript">
9var rh;
10var fr;
11var ds;
12var hs;
13
14function syncScroll(e) {
15hs.scrollLeft = ds.scrollLeft;
16}
17
18function syncResize(e) {
19hs.style.width = ds.offsetWidth-(ds.offsetWidth - ds.clientWidth);
20
21for( i =0; i < rh.childNodes.length; i++ ) {
22rh.childNodes[i].width = fr.childNodes[i].offsetWidth;
23}
24}
25
26function init() {
27rh = document.getElementById("rh");
28fr = document.getElementById("fr");
29ds = document.getElementById("ds");
30hs = document.getElementById("hs");
31
32hs.style.top = ds.offsetTop;
33hs.style.left = ds.offsetLeft;
34hs.style.visibility = 'visible';
35ds.onscroll=syncScroll;
36window.onresize=syncResize;
37syncResize();
38}
39
40</script>
41</head>
42<body onload="init();">
43<div id="hs" style="width:90%;overflow:hidden;z-index=3;visibility:hidden;position:absolute;">
44<table cellpadding="0" cellspacing="1" id="headers">
45<tr id="rh">
46<th>col1</th>
47<th>col2</th>
48<th>col3</th>
49<th>col4</th>
50<th>col5</th>
51<th>col6</th>
52<th>col7</th>
53<th>col8</th>
54<th>col9</th>
55<th>col10</th>
56</tr>
57</table>
58</div>
59<div id="ds" style="width:90%;height:200px;overflow:auto;z-index=2;">
60<table cellpadding="0" cellspacing="1" id="data" width="100%">
61<tr id="fr">
62<th>col1</th>
63<th>col2</th>
64<th>col3</th>
65<th>col4</th>
66<th>col5</th>
67<th>col6</th>
68<th>col7</th>
69<th>col8</th>
70<th>col9</th>
71<th>col10</th>
72</tr>
73<tr>
74<td>this is a width test-- please tell me it works</td>
75<td>this is a width test-- please tell me it works</td>
76<td>this is a width test-- please tell me it works</td>
77<td>this is a width test-- please tell me it works</td>
78<td>this is a width test-- please tell me it works</td>
79<td>thisisawidthtest-- please tell me it works</td>
80<td>this is a width test-- please tell me it works</td>
81<td>this is a width test-- please tell me it works</td>
82<td>this is a width test-- please tell me it works</td>
83<td>this is a width test-- please tell me it works</td>
84</tr>
85<tr>
86<td>this is a width test-- please tell me it works</td>
87<td>this is a width test-- please tell me it works</td>
88<td>this is a width test-- please tell me it works</td>
89<td>this is a width test-- please tell me it works</td>
90<td>this is a width test-- please tell me it works</td>
91<td>this is a width test-- please tell me it works</td>
92<td>this is a width test-- please tell me it works</td>
93<td>this is a width test-- please tell me it works</td>
94<td>this is a width test-- please tell me it works</td>
95<td>this is a width test-- please tell me it works</td>
96</tr>
97<tr>
98<td>this is a width test-- please tell me it works</td>
99<td>this is a width test-- please tell me it works</td>
100<td>this is a width test-- please tell me it works</td>
101<td>this is a width test-- please tell me it works</td>
102<td>this is a width test-- please tell me it works</td>
103<td>this is a width test-- please tell me it works</td>
104<td>this is a width test-- please tell me it works</td>
105<td>this is a width test-- please tell me it works</td>
106<td>this is a width test-- please tell me it works</td>
107<td>this is a width test-- please tell me it works</td>
108</tr>
109</table>
110</div></body>
111</html>
固定表格的标题列(CSS)
comments powered by Disqus