Table冻结表头示例代码

162 阅读 0 评论 107 点赞

我是靠谱客的博主英勇大树，最近开发中收集的这篇文章主要介绍Table冻结表头示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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> 