固定表格的标题列(CSS)

最新推荐文章于 2023-10-07 15:24:45 发布

wu_yongcai

最新推荐文章于 2023-10-07 15:24:45 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/wu_yongcai/article/details/189800

版权

C# 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

wu_yongcai

关注

0
点赞
踩
1

收藏

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

table#headers {table-layout:fixed;background:#eea033;}table#data {table-layout:relative;background:#eea033;}td, th {vertical-align:top;background:#ffffff;}var rh;var fr;var ds;var hs;function sync
复制链接

扫一扫