Just as the title says two table fixed headers, you can adjust the use of JavaScript based on the size of the page, specific examples, for example, interested friends can refer to the following
Code as follows: <%@ page language= "java" contenttype= "text/html; Charset=utf-8 " pageencoding=" UTF-8 "%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > <html > <head> <title></title> <script> /** * @param otarget Need to load scroll DOM object * @param fnhandler processing callback function */ function EventHandler (otarget, Fnhandler) { if (OT Arget.addeventlistener) { otarget.addeventlistener ("Scroll", Fnhandler, False); } else if ( otarget.attachevent) { otarget.attachevent ("Onscroll", Fnhandler); } else { oTarget["onscroll"] = fnhandler; } }; function oo (Divcontentid, Divheaderid) { var div = document.getElementById (Divcontentid); var left = div.scrollleft; var divheader = document.getElementById (Divheaderid); Divheader.scrollleft = left; var diswidth = Div.chiLdren[0].style.width.replace ("px", "") -div.style.width.replace ("px", ""); if (Div.scrollleft >= Diswidth) { DivHeader.style.overflowY = ' scroll '; } else { DivHeader.style.overflowY = ' hidden '; } } window.onload = function onstartlock () { var odiv = document.getElementById ("Divcontentid"); EventHandler (Odiv, function () { oo ("Divcontentid", "Divheaderid"); }); }; > </head> <body> <div id= "Div1all" style= "position:absolute; left:0px; right:0px; top:0px; bottom:0px "> <div id=" Divheaderid " style=" Margin-right:auto; Margin-left:auto; Overflow:hidden; " > <table border= "1" cellspacing= "0" style= "border-collapse:collapse; font-size:15px " bordercolor=" #c1dad7 "cellpadding=" 0 "bgcolor=" #f5fffa " width=" 600px "> <tr Style= "Background:navy; Color:white; height:30px "> <thWidth= "100px" >header a</th> <th width= "100px" >header b</th> <th "100px" >header c</th> <th width= "100px" >header d</th> <th width= "100px" >Header E</ th> <th width= "100px" >header f</th> </Tr> </table> </div> <div id= "Divcontentid" style= "position:absolute; left:0px; top:30.5px; bottom:0px; right:0px; Overflow:scroll "> <table border=" 1 "cellspacing=" 0 " style=" border-collapse:collapse; font-size:15px " bordercolor=" #c1dad7 "cellpadding=" 0 "bgcolor=" #f5fffa " width=" 600px "> <tr > <td width= "100px" >A</Td> <td width= "100px" >B</Td> <td width= "100px ">C</Td> <td width=" 100px ">D</Td> <td width=" 100px ">E</Td> < Td width= "100px" >F</Td> </Tr> <Tr> <td width= "100PX ">A</Td> <td width=" 100px ">B</Td> <td width=" 100px ">C</Td> <TD width= "100px" >D</Td> <td width= "100px" >E</Td> <td width= "100px" >F< /td> </Tr> <Tr> <td width= "100px" >A</Td> <td width= "100px" > b</td> <td width= "100px" >C</Td> <td width= "100px" >D</Td> <td Width= "100px" >E</Td> <td width= "100px" >F</Td> </Tr> <Tr> <TD width= "100px" >A</Td> <td width= "100px" >B</Td> <td width= "100px" >C< /td> <td width= "100px" >D</Td> <td width= "100px" >E</Td> <td width= " 100px ">F</Td> </Tr> <Tr> <td width=" 100px ">A</Td> <td Width= "100px" >B</Td> <td width= "100px" >C</Td> <td wiDth= "100px" >D</Td> <td width= "100px" >E</Td> <td width= "100px" >F</Td> </Tr> </table> </div> </div> </body> </html >