問題：

最近做項目統計的時候碰見一個特定的需求，要求表格上下滾動時，表格頭尾固定；左右滾動的時候表格，表格第一列最后一列固定。

先上效果圖可能會更明了些：

左右滾動時，兩列固定，頭尾中間部分跟著滾動。

上下滾動時，頭尾固定，第一列和最后一列中間部分跟著滾動。

思路：

思考了很久發現，如果單純的用表格基本很難實現，上下滾動的時候存在相互矛盾的地方。最后換了個思路去用p布局，仿表格設計，來實現這樣的效果。

解決：

1、整體布局：分為上中下三部分，即header,body,footer三個部分。body固高。實現上下滾動。是不是很簡單，哈哈。

2、header布局：分為left container right，left10%寬度左浮動，container80%寬度左浮動，right10%寬度左浮動。container里面加一個數據實際寬度的容器column-container（相對定位）。

3、body，footer同header。

4、控件核心：生成一個寬度同container同寬的（80%）p，里面放置一個同column-container實際數據寬度相同的p（如id=Scroll）。來模擬左右滾動條。

JavaScript Code復制內容到剪貼板

$( #Scroll ).scroll(function () {

var scrollLeft = $(this).scrollLeft();

$( .column-container ).css({ left : -scrollLeft + px });

});

即，模擬的滾動條去控制header body footer 中的column-container滾動。這樣就實現了左右滾動時固定了兩列，同時頭尾行的container也跟著滾動。

結語：

由于代碼樣式等貼出來太冗長了，在這里就只說說思路了，動手試試吧。

【相關推薦】

1. HTML免費視頻教程

2. 詳解前端開發常用的HTML標簽

3. 通過marquee標簽完成滾動效果的純html代碼

4. 用HTML編寫個人簡歷的代碼實例

5. 分享三種創建新元素的方法

以上就是html實現固定表格四周并且可以上下左右滾動的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。