如何固定table的第一行，不随纵向滚动条滚动，但能横向滚动

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

就烦条0o
2017-03-27 · 知道合伙人软件行家

就烦条0o
知道合伙人软件行家

采纳数：33315 获赞数：46487

从事多年系统运维，喜欢编写各种小程序和脚本。

向TA提问私信TA

关注

展开全部

稍微改改就可以兼容全部主流，主要是非IE的没有window.scroll，可以用计时器定时计算scrollTop来模拟。有需要的话再说。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<拍悔head>
<title>数据栏百分比动画显示</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="author" content="Hulu">
<style type="text/css">
*{
margin:0;
padding:0;
}
td{
width:200px;
line-height:30px;
}
table{
width:2000px;
}
#th{
background-color:#888888;
position:absolute;
height:30px;
top:0;
left:0;
}
#tb{
margin-top:30px;
}
</style>
<script type="text/javascript">
var pre_scrollTop=0;//滚动条事件之前文档滚纯败动高度
var pre_scrollLeft=0;//滚动条事件之前文档滚动宽度
var obj_th;
window.onload =function () {
pre_scrollTop=document.documentElement.scrollTop;
pre_scrollLeft=document.documentElement.scrollLeft;
obj_th=document.getElementById("th");
};
window.onscroll = function(){
if(pre_scrollTop != document.documentElement.scrollTop){
//滚动了数值滚动条
pre_scrollTop=document.documentElement.scrollTop;
if(obj_th){
obj_th.style.top=document.documentElement.scrollTop;
}
}
else if(pre_scrollLeft != document.documentElement.scrollLeft){
//滚动了水平滚动条
pre_scrollLeft=document.documentElement.scrollLeft;
}
};
</script>
</head>
<body>
<table id="th" cellpadding="0" cellspacing="0">
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
<td>004</td>
<td>005</td>
<td>006</td>
<td>007</td>
<td>008</td>
<td>009</td>
<td>0010</td>
</tr>
</table>
<table id="tb" cellpadding="0" cellspacing="0">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>袭裤正
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<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>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何固定table的第一行，不随纵向滚动条滚动，但能横向滚动

其他类似问题

为你推荐：