固定table表头
来源：互联网 发布：梦幻西游淘宝网租号 编辑：程序博客网 时间：2024/06/10 08:27
项目中需要在滚屏中悬浮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> 0 0
- css 固定table表头
- Table实现表头固定
- table表头行固定
- 固定table表头
- table表头行固定
- table固定表头
- table固定表头
- 固定table表头
- table表头固定
- 固定table的表头
- bootstrap固定table表头
- table固定表头
- bootstrap Table表头固定
- bootstrap固定table表头
- table表头固定
- 如何固定table的表头
- 如何固定table的表头
- 如何固定table的表头
- 第十三周阅读程序一
- 怎样写一个拼写检查器
- DELPHI XE7,开发代号Carpathia，一些新语法和新特性！
- 数据结构面试题总结4——数组：求两个有序数组中的共同元素
- 基于形态学运算的腐蚀，膨胀，开运算，闭运算
- 固定table表头
- 常用的DOS命令
- 区间完全覆盖问题----挤牛奶
- 关于淘宝网评论数据的抓取
- 【玩转前端开发】jQuery中选择器详细介绍-01
- 医疗信息化应满足8方面人群的需求
- Linux&Android 的文件权限和进程权限
- JAVA wait(), notify(),sleep使用
- 利用typedef定义函数指针
