怎么用JS固定表头

我有一个TABLE，第一行是表头，想让滚动条动的时候第一行不动，用了position：fixed以后第一行是不动了，但是位置和列宽都面目全非了，能否在onload的时候取得位置和列宽等，然后再用JS实现固定？

解决方案 »

  1.   


    <script type="text/javascript" language="javascript">
    window.parent.document.getElementById('tab_').style.width=window.document.body.scrollWidth+'px';
    </script>不知道行不行  你试试吧
      

  2.   

    可以考虑把表头提出来，用div 显示。下面div 显示内容，只有下面的div才设置滚动条
      

  3.   

    可以参考这个table固定行的效果
      

  4.   

    自己写了一个玩玩，可以兼容IE和火狐！代码如下：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript">
    var pos;
    window.onload=function(){
      pos=document.getElementById('cont').style.posTop;
    }
    function eee(){  
         if(document.all)
        {

    document.getElementById('cont').style.posTop=document.body.scrollTop+pos;}
       else
       {document.getElementById('cont').style.position="fixed";}
       }
    window.onscroll=eee;
    </script>
    </head>
    <body style="text-align:center;margin:0px;padding:0px;">
       <div id="cont" style="position:absolute;left:560px;top:0px;z-index:2;width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表头1111</div>
       <br/>
         <br/>
      <br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <div style="width:300px;height:30px;background:#ccc;text-align:center;margin:0 auto;">表身2222</div><br/>
       <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/>
        <br/>
       <br/> </body>
     </html>