固定表头表格

<!-- 固定表头表格 首贴www.51js.com 作者:LQY169 使用转载请保留 -->

<style type=text/css>
.griddiv{}{
   overflow-x:hidden;
   border:black 1px solid;
   BACKGROUND: #F8F9FC;
}
.title {}{
        BORDER-RIGHT: #555 1px solid;
        BORDER-TOP: #fff 1px solid;
        BORDER-BOTTOM: #555 1px solid;
        BORDER-LEFT: #fff 1px solid;
        padding:2 1 2 2;
        BACKGROUND: #ccc;
        CURSOR: hand;
        Font-Size:9pt;
        overflow:hidden;
        WHITE-SPACE: nowrap
}
td{}{
   WHITE-SPACE: nowrap;
   BORDER-RIGHT: #ddd 1px solid;
   BORDER-TOP: #ddd 1px solid;
}
.cdata {}{
        padding:1 1 1 2;
        bgColor:expression(this.bgColor=((this.rowIndex)%2==0 )? '#FFFFFF' : '#cccccc');
        Font-Size:9pt;
}

</style>

<div class='griddiv' id='griddiv'>
 <div id="titlediv" style='position:relative;'></div>
 <div id="tablediv" style='overflow-x:scroll;overflow-y:scroll' onscroll='SYNC_Roll(this)'>
  <table id="tb" width='100%' border="0" cellpadding="0" cellspacing="0">
   <tr id="titletr"><td>标题1</td><td>标题2</td><td>标题3</td></tr>
   <tr class='cdata'><td>内容1内容1内容1内容1内容1内容</td><td nowrap>内容2</td><td nowrap>内容3222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr>
  </table>
 </div>
<div>
<script language=javascript>
    function createtitle(tdiv,ttb,ttr){
      tdiv.style.width=ttb.clientWidth;
      var newtit="";
      for(i=0;i<titletr.cells.length;i++)
      {
         ttd=titletr.cells[i];
         newtit=newtit+"<span class='title' style='width:"+(ttd.clientWidth+1)+"px'>"+ttd.innerText+"</span>"
      }
      tdiv.innerHTML=newtit;
      titletr.style.visibility = "hidden";
      if (ttr.rowIndex!=ttb.rows.length-1)
        ttb.moveRow(ttr.rowIndex,ttb.rows.length-1);
    }
    function SYNC_Roll(obj){
       titlediv.style.posLeft=-obj.scrollLeft;
    }
    function SetGrid(awidth,aheight){
       var gdiv=document.getElementById("griddiv");
       titdiv=document.getElementById("titlediv");
       ttbdiv=document.getElementById("tablediv");
       ttb=document.getElementById("tb");
       ttr=document.getElementById("titletr");
       gdiv.style.pixelWidth=awidth;
       tablediv.style.pixelWidth=awidth;
       tablediv.style.pixelHeight=aheight;
       createtitle(titdiv,ttb,ttr);
    }
    SetGrid(500,300);
</script>