首先，在很多的網頁數據分析或者網站查詢數據庫的操作中，我們不可避免需要在前端頁面中展示所有數據。由於版面構建的問題，導致div內容模塊大小，不足以容納所有數據，這時候我們就必須考慮引入頁面的水平或者豎直滾動條。這樣能夠實現在固定大小的div中，通過滑動滾動條來對所有數據進行檢索。這時，我們會發現，如果表頭不被固定，我們滑動滾動條時，不能很好的確定當前數據屬於什麽列是什麽樣的數據。

　　所以，在這裏我分享一下通過js固定表頭的頁面操作：

1  //水平、垂直滾動條實現表頭標題的固定
2       document.getElementById("table1").onscroll=function(e) {
 
3     document.getElementById("table2").scrollLeft = document.getElementById("table1_tbodyDiv").scrollLeft;
4 };

　　關鍵代碼如上訴。這裏我說的是，動態獲取後臺json數據，動態生成表格的模型。首先我們需要建立兩個table模型，table1為表頭，table2為內容。最後把兩張表設置成有滾動條，並且把table1的滾動條事件隱藏，並綁定到table2的滾動事件上。這樣就能達到我們的效果。

水平和豎直滑動條捆綁，表頭固定的實現