html實現固定表格四周並且可以上下左右滾動

這篇文章主要為大家詳細介紹了固定表格四周實現表格上下左右滾動的解決方法，表格上下滾動時，表格頭尾固定；左右滾動的時候表格，表格第一列最後一列固定，本文為大家提供了思路，有興趣的夥伴們可以參考一下

問題：
 
  最近做專案統計的時候碰見一個特定的需求，要求表格上下捲動時，表格頭尾固定；左右滾動的時候表格，表格第一列最後一列固定。
 
  先上效果圖可能會更明了一些：
 
  左右捲動時，兩列固定，頭尾中間部分跟著滾動。

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

想法：
 
   思考了很久發現，如果單純的表格基本上很難實現，上下滾動的時候存在相互矛盾的地方。最後換了個思路去用p佈局，仿表格設計，來達到這樣的效果。
 
解決：
 
   1、整體佈局：分為上中下三個部分，即head er,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#複製內容到剪貼簿

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

2.            (this).scrollLeft();   

卷"
3. : -scrollLeft + 

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

  結語：

4.  

       由於程式碼樣式等貼出來太冗長了，在這裡就只說說想法了，動手試試看。

【相關推薦】

1. HTML免費視訊教學

2. 

詳解前端開發常用的HTML標籤

3. 

透過marquee標籤完成捲動效果的純html代碼

4. 

用HTML寫個人履歷表的程式碼實例

#5. 

分享三種創造新元素的方法#

以上是html實現固定表格四周並且可以上下左右滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！