固定表格的标题列(CSS)

  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>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus