固定表格的标题列(CSS)
2004-11-24 09:25
531 查看
来源： http://dev.csdn.net/develop/article/51/article/51/51967.shtm http://dev.csdn.net/develop/article/51/51972.shtm
例1： <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>
例2：
<html>
<body>
<div style="overflow:auto;height:100px;">
<table width="100%">
<TR style="position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;">
<TH nowrap>Header A</TH>
<TH nowrap>Header B</TH>
<TH nowrap>Header C</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>
</html>
例1： <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>
例2：
<html>
<body>
<div style="overflow:auto;height:100px;">
<table width="100%">
<TR style="position:relative;top:expression(this.offsetParent.scrollTop);background:navy;color:white;">
<TH nowrap>Header A</TH>
<TH nowrap>Header B</TH>
<TH nowrap>Header C</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript封装的常用工具类库bee.js用法详解【经典类库】
- VC与Delphi之间动态链接库互相调用
- javascript表单之间的数据传递！
- PHP 的 MySQL 操作类，跟手册上的函数一样用，但是更方便了。多说无益，看了就知道了。
- SELECT TOP N 问题
- delphi中的时间操作技术(1)
- delphi中的时间操作技术（2）
- VB五子棋问题，请高手赐教
- IP地址的隐藏（delphi实现 ）
- 解析IP地址为主机域名
- 将某一主机域名解析为IP地址
- 獲取SQL SERVER用戶表信息游標
- struts tag lib(1)
- Struts tags (4) ----Html(2)
- 有关TrueDBGrid的问题向各位大虾请教