摘录固定表头

<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>

//注意如果数据量很多div需要的宽度比较大，想要保持表头和内容上下对齐需要把显示内容的div调整的稍微比表头宽一点（15px，具体自己调试）