TABLE固定表头-多浏览器支持

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style  type="text/css">
#rrr td{ white-space:nowrap}
</style>
<script language="javascript" type="text/javascript">
 function $(id)
 {
        return document.getElementById(id);
  }
    
function pp(div)
{
    //alert($("htr").offsetParent.tagName);
    $("htr").style.top=parseInt(div.scrollTop)-1;
     window.status=div.scrollTop;//$("htr").offsetParent.tagName;//Offset($("rrr")).t+","+$("rrr").offsetTop+","+$("rrr").scrollTop;
    $("btn").value=$("htr").style.top;//$("htr").offsetParent.tagName;
    
}
</script>
</head>
<body  style="width:100%;height:100%">
<div>
  <table cellspacing="0" cellpadding="0" id="rrr" border="1"  bordercolor="#0000FF">
  <thead>
    <tr style=" background:#009900; position:relative;" id="htr">
      <td>列一a</td>
      <td>列二b</td>
      <td>列三c</td>
      <td>列四d</td>
      <td>列五e</td>
      <td>列六f</td>
      <td>列七g</td>
    </tr>
    </thead>
     <tbody  style="overflow:auto; width:200px; height:200px" id="ttt" onscroll="pp(this)" >
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
      <td>b</td>
      <td>a</td>
    </tr>
    </tbody>
  </table>
</div>
<p><br>
  <br>
  <input type="button" name="Submit" value="aaa" id="btn"onClick="alert($('rrr').scrollTop)">
</p>
</body>
</html>



  • 发布时间:2012-07-16
  • 阅读次数:9440