Table冻结表头
来源:互联网 发布:淘宝联盟登录淘宝名 编辑:程序博客网 时间:2024/06/10 02:45
Table冻结表头:
<script type="text/javascript">function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.rows[0].style.position="relative"; div.onscroll = function(){ var tr = tab.rows[0]; tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); tr.style.left=-1; } } } window.onload = function(){ var tab=document.getElementById("freezedivTable"); if(tab){ fixupFirstRow(tab); } } </script>
html源码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script type="text/javascript">function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.rows[0].style.position="relative"; div.onscroll = function(){ var tr = tab.rows[0]; tr.style.top = this.scrollTop-(this.scrollTop==0?1:2); tr.style.left=-1; } } } window.onload = function(){ var tab=document.getElementById("freezedivTable"); if(tab){ fixupFirstRow(tab); } } </script></head><body><div class="freezediv" style="width:100%;height:100px;overflow:auto;"><table id="freezedivTable" style="width:100%;" border="1"><tr bgcolor="white"><th width="25%">序号</th><th width="25%">内容</th><th width="25%">序号</th><th width="25%">内容</th></tr><tr><td>1</td><td>内容</td><td>11</td><td>内容</td></tr><tr><td>2</td><td>内容</td><td>22</td><td>内容</td></tr><tr><td>3</td><td>内容</td><td>33</td><td>内容</td></tr><tr><td>4</td><td>内容</td><td>44</td><td>内容</td></tr><tr><td>5</td><td>内容</td><td>55</td><td>内容</td></tr><tr><td>6</td><td>内容</td><td>66</td><td>内容</td></tr><tr><td>7</td><td>内容</td><td>77</td><td>内容</td></tr><tr><td>8</td><td>内容</td><td>88</td><td>内容</td></tr><tr><td>9</td><td>内容</td><td>99</td><td>内容</td></tr><tr><td>10</td><td>内容</td><td>1010</td><td>内容</td></tr></table></div></body></html>
- Table冻结表头
- table表头冻结
- Table冻结多行表头
- 表头冻结
- JS表头冻结
- JS实现表头冻结
- 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览
- 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器
- 冻结表头HTML报表制作方法
- 一段冻结表头的代码
- 冻结表头HTML报表制作方法
- 关于Web中的冻结表头
- html+jquery 冻结表格表头
- table冻结第一行
- JTable_7_1冻结列Table
- 快逸报表研究-冻结表头
- web DataGridView 冻结表头和列
- PHPExcel冻结(锁定)表头的使用方法
- spring REST 之Hello World
- iOS开发之在地图上绘制出你运动的轨迹
- 关于正则表达式
- 淘宝海量数据快速迁移实践
- VS2010中水晶报表应用及实例
- Table冻结表头
- 探讨read的返回值的三种情况
- AutoFac使用方法总结:Part I
- Asp.net MVC3 自定义HtmlHelper控件
- 实现 ftp 文件/文件夹的上传下载以及删除
- autorelease探究
- PLSQL Developer图形化窗口创建 oracle 数据库全过程
- ViewPager+Fragment滑动界面,并做延迟加载
- 文档示例