table表头固定

最新推荐文章于 2024-07-31 11:01:16 发布

weixin_33836874

最新推荐文章于 2024-07-31 11:01:16 发布

阅读量512

点赞数

文章标签： php python

原文链接：https://my.oschina.net/u/3358860/blog/3010799

版权

2019独角兽企业重金招聘Python工程师标准>>>

table表头固定(一)

2018年01月05日 16:55:07 小猫儿阅读数：4419

方法1：js实现

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>table表头固定，不随竖向滚动条滚动，但随横向滚动条滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
td, th{
width:200px;
line-height: 30px;
text-align:center;
}
th {
background-color: green;
}
td:first-child{
background-color: yellow;
}
table{
width:2000px;
}
#wrap{
position:relative;
}
#topic{
position:absolute;
top:0;
left:0;
width:2000px;
}
</style>
<script>
var pre_scrollTop = 0; // 滚动条事件之前文档滚动高度
var obj_topic ;
window.onload = function(){
pre_scrollTop = (document.documentElement.scrollTop || document.body.scrollTop);
obj_topic = document.getElementById("topic");
}
window.onscroll = function(){
if(pre_scrollTop != (document.documentElement.scrollTop || document.body.scrollTop)){
pre_scrollTop = (document.documentElement.scrollTop || document.body.scrollTop);
obj_topic.style.top = pre_scrollTop+"px";
}
}
</script>
</head>
<body>
<div id="wrap">
<table cellpadding="0" cellspacing="0">
<tr id="topic">
<th>000</th>
<th>001</th>
<th>002</th>
<th>003</th>
<th>004</th>
<th>005</th>
<th>006</th>
<th>007</th>
<th>008</th>
<th>009</th>
</tr>
<tr>
<td>100</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>
</tr>
<tr>
<td>101</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>
</tr>
<tr>
<td>102</td><td>content1</td><td>content2</td&g