87,910
社区成员
发帖
与我相关
我的任务
分享怎么用JS固定表头
我有一个TABLE，第一行是表头，想让滚动条动的时候第一行不动，用了position：fixed以后第一行是不动了，但是位置和列宽都面目全非了，能否在onload的时候取得位置和列宽等，然后再用JS实现固定？
...全文
请发表友善的回复…
发表回复
kaifadi 2011-03-10
- 打赏
- 举报
自己写了一个玩玩，可以兼容IE和火狐！代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var pos;
window.onload=function(){
pos=document.getElementById('cont').style.posTop;
}
function eee(){
if(document.all)
{
document.getElementById('cont').style.posTop=document.body.scrollTop+pos;}
else
{document.getElementById('cont').style.position="fixed";}
}
window.onscroll=eee;
</script>
</head>
<body style="text-align:center;margin:0px;padding:0px;">
<div id="cont" style="position:absolute;left:560px;top:0px;z-index:2;width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表头1111</div>
<br/>
<br/>
<br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var pos;
window.onload=function(){
pos=document.getElementById('cont').style.posTop;
}
function eee(){
if(document.all)
{
document.getElementById('cont').style.posTop=document.body.scrollTop+pos;}
else
{document.getElementById('cont').style.position="fixed";}
}
window.onscroll=eee;
</script>
</head>
<body style="text-align:center;margin:0px;padding:0px;">
<div id="cont" style="position:absolute;left:560px;top:0px;z-index:2;width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表头1111</div>
<br/>
<br/>
<br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
cloudgamer 2011-03-10
- 打赏
- 举报
可以参考这个table固定行的效果
hch126163 2011-03-10
- 打赏
- 举报
可以考虑把表头提出来，用div 显示。下面div 显示内容，只有下面的div才设置滚动条
q86163325 2011-03-10
- 打赏
- 举报
<script type="text/javascript" language="javascript">
window.parent.document.getElementById('tab_').style.width=window.document.body.scrollWidth+'px';
</script>
不知道行不行 你试试吧
