您的位置：首页 > 编程语言

Table冻结表头示例代码

2013-08-20 19:06 567 查看

<%@ 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 冻结表头

相关文章推荐

新的分享

章节导航