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>