这里只是简单的实现,主要是用了position属性的fixed属性值,这个属性值需要高版本浏览器的支持,如果要兼容低版本的浏览器可以通过写脚本的方式实现,也可以使用UI库,有些UI库里面表格插件的标题行都是冻结的。这里只介绍使用fixed的方法:
<!DOCTYPE HTML> <html> <head> </head> <body> <div class="freezediv" style=" 400px; height: 140px; overflow: auto;border:1px solid gray"> <table id="freezedivTable" cellpadding="0" cellspacing="0"> <tr id="fixTr" style="position: fixed; background-color:Yellow;"> <td style=" 60px"> 序号 </td> <td style=" 60px"> 内容 </td> </tr> <tr> <td> 序号 </td> <td> 内容 </td> </tr> <tr> <td style=" 60px"> 1 </td> <td style=" 60px"> 内容1 </td> </tr> <tr> <td> 2 </td> <td> 内容2 </td> </tr> <tr> <td> 3 </td> <td> 内容3 </td> </tr> <tr> <td> 4 </td> <td> 内容4 </td> </tr> <tr> <td> 5 </td> <td> 内容5 </td> </tr> <tr> <td> 6 </td> <td> 内容6 </td> </tr> <tr> <td> 7 </td> <td> 内容7 </td> </tr> <tr> <td> 8 </td> <td> 内容8 </td> </tr> <tr> <td> 9 </td> <td> 内容9 </td> </tr> <tr> <td> 10 </td> <td> 内容10 </td> </tr> <tr> <td> 11 </td> <td> 内容11 </td> </tr> <tr> <td> 12 </td> <td> 内容12 </td> </tr> <tr> <td> 13 </td> <td> 内容13 </td> </tr> <tr> <td> 14 </td> <td> 内容14 </td> </tr> <tr> <td> 15 </td> <td> 内容15 </td> </tr> <tr> <td> 16 </td> <td> 内容16 </td> </tr> <tr> <td> 17 </td> <td> 内容17 </td> </tr> <tr> <td> 18 </td> <td> 内容18 </td> </tr> <tr> <td> 19 </td> <td> 内容19 </td> </tr> <tr> <td> 20 </td> <td> 内容20 </td> </tr> </table> </div> </body> </html>