固定表格的标题列(CSS)

最新推荐文章于 2023-04-12 12:50:26 发布

chonboy

最新推荐文章于 2023-04-12 12:50:26 发布

阅读量806

点赞数

分类专栏： CSS 文章标签： css function table javascript div html

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

来源：
http://dev.csdn.net/develop/article/51/article/51/51967.shtm
http://dev.csdn.net/develop/article/51/51972.shtm

例1：

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.οnscrοll=syncScroll;
window.οnresize=syncResize;
syncResize();
}

</script>

</head>

<body οnlοad='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>

chonboy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定表格的标题列(CSS)

来源：http://dev.csdn.net/develop/article/51/article/51/51967.shtmhttp://dev.csdn.net/develop/article/51/51972.shtm例1： table#headers {table-layout:fixed;background:#eea033;}table#data {table-layout:rela
复制链接

扫一扫