项目中需要在滚屏中悬浮TABLE表头title,在网上找到一个不错的例子,思路为克隆当前TABLE的表头悬浮在滚动条容器顶端,开发中发现时常会出现表头与数据行错位的情况,故略作改进,即克隆TABLE表头和第一行数据(实际是table的第二行),并使用css的opacity,使第一行数据透明不可见,如此便解决了这个问题,不受table表列的宽度影响。
代码如下:
<html>
<head>
<title>固定表头</title>
</head>
<style>
.box{
width:100%;
height:100%;
overflow-y:auto;/** 必须,否则当表格数据过多时,不会产生滚动条,而是自动延长该div的高度 */
position:relative;/** 必须,若不设置,拷贝得来的表头将相对于其设置该属性为该值的父节点(或间接父节点)定位,如果没有,则相对于body */
}
table,tr,th,td{
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 设置当文本过长时换行 */
border:1px solid #ccd;
}
th{
height:24px;
line-height:24px;
background-color:#cfc;
border:1px solid #ccd;
}
.opacityTD td{height:1px; line-height:1px; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; border: 0;}
</style>
<SCRIPT LANGUAGE="JavaScript">
/**
* 功能:固定表头
* 参数 viewid 表格的id
* scrollid 滚动条所在容器的id,此div的overflow-y必须设置为auto或scroll;
* size 表头的行数(复杂表头可能不止一行)
*/
function fixTableTitle(viewid,scrollid,size){
var scroll = document.getElementById(scrollid);
// 将表格拷贝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 将拷贝得到的表格保留表头和第一行数据
for(var i=tb2.rows.length;i>size+1;i--){
// 每次删除数据行的第一行
tb2.deleteRow(size);
}
var child = tb2.getElementsByTagName("tr")[1];//获取数据行
if(typeof(child)=='undefined')return;// 若没有数据,则跳出此方法
child.className = "opacityTD";//设置样式透明不可见
// 创建一个div
var bak = document.createElement("div");
var attr_id = document.createAttribute('id'); //新建Element的id属性
attr_id.nodeValue = 'div'+scrollid; //为id属性赋值
bak.setAttributeNode(attr_id); //为Element设置id属性
// 将创建得到的div添加到滚动条所在容器的div
scroll.appendChild(bak);
// 将拷贝得到的表格在删除数据行后添加到创建的div中
bak.appendChild(tb2);
// 设置此DIV的属性
bak.style.position = "absolute";
bak.style.display = "block";
bak.style.left = 0;
bak.style.top = "0px";
bak.style.width = "100%";
// 给滚动条容器绑定滚动条滚动事件,在滚动条滚动事件发生时,调整拷贝得来的表头的top值,保持其在可视范围内,且在滚动条容器的顶端
scroll.onscroll = function(){
var topH = this.scrollTop;//document.body.screenTop;
bak.style.top = topH + "px";
}
}
// 在页面加载完成后调用该方法
window.onload = function (){
fixTableTitle("tab2",'box2',1);
}
</SCRIPT>
<body>
<div class="box" id="box2">
<table id="tab2">
<tr>
<th width="5%">序号</th>
<th width="10%">姓名</th>
<th width="20%">身份证号</th>
<th width="15%">费款所属期</th>
<th width="10%">缴费基数</th>
<th width="15%">个人缴费金额</th>
<th width="15%">单位缴统筹金额</th>
<th width="10%">缴费标志</th>
</tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
<tr><td>1</td><td>唐三藏</td><td>678675196608230764</td><td>201501</td><td>34534</td><td>1234</td><td>3234</td><td>已缴</td></tr>
</table>
</div>
</body>
</html>