<html>
<head>
<style>
table#headers {table-layout:fixed;background:#eea033;}
table#data {table-layout:relative;background:#eea033;}
td, th {vertical-align:top;background:#ffffff;}
</style>
<script language="javascript">
var rh;
var fr;
var ds;
var hs;
function syncScroll(e) {
hs.scrollLeft = ds.scrollLeft;
}
function syncResize(e) {
hs.style.width = ds.offsetWidth-(ds.offsetWidth - ds.clientWidth);
for( i =0; i < rh.childNodes.length; i++ ) {
rh.childNodes[i].width = fr.childNodes[i].offsetWidth;
}
}
function init() {
rh = document.getElementById("rh");
fr = document.getElementById("fr");
ds = document.getElementById("ds");
hs = document.getElementById("hs");
hs.style.top = ds.offsetTop;
hs.style.left = ds.offsetLeft;
hs.style.visibility = 'visible';
ds.onscroll=syncScroll;
window.onresize=syncResize;
syncResize();
}
</script>
</head>
<body onload='init();'>
<div style="width:90%;overflow:hidden;z-index=3;visibility:hidden;position:absolute;" id='hs'>
<table cellpadding="0" cellspacing="1" id="headers">
<tr id='rh'>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
<th>col9</th>
<th>col10</th>
</tr>
</table>
</div>
<div style="width:90%;height:200px;overflow:auto;z-index=2;" id='ds'>
<table cellpadding="0" cellspacing="1" width="100%" id="data">
<tr id='fr'>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
<th>col9</th>
<th>col10</th>
</tr>
<tr>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>thisisawidthtest-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
</tr>
<tr>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
</tr>
<tr>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
<td>this is a width test-- please tell me it works</td>
</tr>
</table>
</body>
</html>
|
本类阅读TOP10