固定表头

 

<Script language = "JavaScript">
  var tdW;
  //Scroll
  function f_scroll(Col_T,Row_T,DivNm){
    if(Col_T!=''){
      document.getElementById(Col_T).scrollLeft = document.getElementById(DivNm).scrollLeft;
    }
    if(Row_T!=''){
      document.getElementById(Row_T).scrollTop = document.getElementById(DivNm).scrollTop;
    }
  }
  
  //Write table cell
  function writeTD(trNum,tdNum,tdHead,content){
    var i;
    for(i=0;i<=tdNum;i++){
      document.write(tdHead);
    if(content != ''){
      document.write(content);
      } else {
        document.write(trNum+","+i);
      }
      document.write("</TD>");
    }
  }
    
  //Write table Row
  function writeTR(trNum,tdNum,tdHead,content){
    var i;
    for(i=0;i<=trNum;i++){
      document.write("<TR>");
      writeTD(i,tdNum,tdHead,content);
      document.write("</TR>");
    }
  }
</Script>

<TABLE BORDER=0 STYLE="POSITION:ABSOLUTE;LEFT: 0px;TOP: 0px;right: 0px;
                       bottom: 0px;background-color: khaki;">
 <TR>
  <TD STYLE="text-align:right;">
<!--Table1 start-->
   <Div ID="Table1" 
     STYLE="position:relative;top:5;left:4;border-bottom: 0.5pt solid white;
            width:26.25px;height:20px;">
   <TABLE BORDER=0 STYLE="border-collapse:collapse;text-align:center;
                          width:26.25px;height:20px;">
    <TR>
     <TD NOWRAP 
       STYLE="width:60px;height:40;background-color:silver;
              color:#FFFFFF;border-right: 0.5pt solid white;
              word-break:break-all;border:0.5pt solid black;">
     </TD>
    </TR>
   </TABLE>
   </Div>
<!--Table1 end-->
  </TD>
  <TD>
<!--Table2 start-->
   <Div ID="Table2" 
     STYLE="position:relative; top:5;border-bottom: 0.5pt solid white;
            height:20px; width:481px;overflow-x:hidden;">
   <TABLE BORDER=0 
     STYLE="border-collapse:collapse;background-color:#003399;
            color: #FFFFFF;text-align:center;height:40px;">
    <TR>
      <script language=javascript>
        tdW='<TD NOWRAP STYLE="width:100px;background-color:silver;'+
            'color:black;border-color:#silver;border:0.5pt solid black;'+
            'border-left:0;word-break:break-all;">';
        writeTD(0,20,tdW,'');
      </script>
    </TR>
   </TABLE>
   </Div>
<!--Table2 end-->
  </TD>
 </TR>
 <TR>
  <TD STYLE="vertical-align:top; ">
<!--Table3 start-->
   <Div ID="Table3" 
     STYLE="border-bottom: 0.5pt solid black;width:26.25px; height:265px; 
            overflow-y:hidden; position:relative;left:4;">
    <TABLE BORDER=0 
      STYLE="border-collapse:collapse;background-color:#FFFFFF;
             color:#000000;height:20px;">
      <script language=javascript>
        tdW='<TD NOWRAP STYLE="width:60px;height:22px;text-align:center;'+
            'border-left: 0.5pt solid black;border-right: 0.5pt solid black;'+
            'border-bottom: 0.5pt solid black;word-break: break-all;'+
            'background-color:silver;">';
        writeTR(30,0,tdW,'');
      </script>
    </TABLE>
   </Div>
<!--Table3 end-->
  </TD>
  <TD STYLE="vertical-align:top; ">
<!--Table4 start-->
   <Div ID="Table4" 
     onScroll="f_scroll('Table2','Table3','Table4');" 
     STYLE="height:281px; width:497px;overflow-y:scroll;overflow-x:scroll;">
   <TABLE BORDER=0 STYLE="border-collapse:collapse;">
     <script language=javascript>
       tdW='<TD NOWRAP STYLE="width:100px;height:22px;background-color:#ffffff;'+
           'border-right:0.5pt solid black;border-bottom:0.5pt solid black;'+
           'word-break: break-all; text-align:center;">';
       writeTR(30,20,tdW,'');
     </script>
   </TABLE>
   </Div>
<!--Table4 end-->
  </TD>
 </TR>
</TABLE>