這里只是簡單的實現,主要是用了position屬性的fixed屬性值,這個屬性值需要高版本瀏覽器的支持,如果要兼容低版本的瀏覽器可以通過寫腳本的方式實現,也可以使用UI庫,有些UI庫里面表格插件的標題行都是凍結的。這里只介紹使用fixed的方法:
<!DOCTYPE HTML> <html> <head> </head> <body> <div class="freezediv" style="width: 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="width: 60px"> 序號 </td> <td style="width: 60px"> 內容 </td> </tr> <tr> <td> 序號 </td> <td> 內容 </td> </tr> <tr> <td style="width: 60px"> 1 </td> <td style="width: 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>