简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

HTML CSS JS實現完美相容各大瀏覽器的TABLE固定列_javascript技巧

WBOY
發布： 2016-05-16 16:02:11
原創
1144 人瀏覽過

BS架構的企業級應用中，當一個表格列數較多時，用戶一個常見的需求就是把前​​面幾個重要的列固定住，這樣拖動滾動條時固定的列會方便用戶查看數據，使用者體驗很好。一些重量級的JS元件庫也都有這個功能，那麼有沒有更簡單的方法來實現這個功能呢？

這個需求常見的解決方案是使用表格拼接的方法，這個方案如果要製作靜態的網頁，或者功能簡單的動態頁面，邏輯比較簡單，技術上也不復雜，很容易實現，但是如果要做成組件，動態功能較多的話，就需要寫大量的冗餘程式碼，難以維護，甚至於一個簡單的功能，都需要寫很多的程式碼，例如事件處理等，這個方法就顯得比較笨拙，靈活性很差，不是一個好的方案。

經過長時間的分析研究，各種場景的試驗，我們找到了一個兼容性非常好的解決方案，總體上來講採用的是定位計算的方法，下面貼出程式碼，然後做個解讀。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function divScroll(scrollDiv){
  var scrollLeft = scrollDiv.scrollLeft;
  document.getElementById("tableDiv_title").scrollLeft = scrollLeft;
  document.getElementById("tableDiv_body").scrollLeft = scrollLeft;    
}
function divYScroll(scrollYDiv){
  var scrollTop = scrollYDiv.scrollTop;
  document.getElementById("tableDiv_y").scrollTop = scrollTop;  
}
function onwheel(event){
  var evt = event||window.event;
  var bodyDivY = document.getElementById("tableDiv_y");
  var scrollDivY = document.getElementById("scrollDiv_y");
  if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){
    if (evt.deltaY){
      bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;
      scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;
    }else{
      bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;
      scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;
    }
  }
}
</script>
<style type="text/css">
body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border:0;
border:none;
}
 
table td {
border:1px solid #000;
overflow:hidden;
padding:0 2px;
}
</style>
</head>
<body>
<div style="width:500px; position:relative; padding-right:18px;">
  <div style="position:relative;height:368px;overflow:hidden;width:100%">
  <div style="padding-left:108px; width:auto; overflow:hidden; background:#f00;" id="tableDiv_title" >
  <table border="0" cellspacing="0" cellpadding="0" >
   <tr>
    <td style="min-width:30px; max-width:30px; left:0; top:0; width:30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>
    <td style="min-width:74px; max-width:74px; left:30px; top:0; width:74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自动表格</td>
    <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
    <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
    <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
    <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
    <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
    <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
   </tr>
   </table>
   </div> 
  <div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">
    <div style="padding-left:108px; width:auto;overflow:hidden;" id="tableDiv_body">
    <table border="0" cellspacing="0" cellpadding="0" >
     <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
      <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>
      <td style="min-width:74px; max-width:74px; left:30px; width:74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
     <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>
      <td style="min-width:74px; max-width:74px;left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
     <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
      <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
      <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>   
     <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
      <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
      <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>
      <tr>
      <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>
      <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td>
      <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
     </tr>      
    </table>
  </div>     
  </div> 
   <div style="background-color:#eee;overflow:hidden;top:150px; width:100%; z-index:2;position:absolute;">
    <div style="margin-left:108px; width:auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>
      <div style="width:630px; height:1px;"></div>
    </div>
  </div>
  </div>
    <div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>
      <div style="width:1px; height:194px;"></div>
     </div>
  </div>
  </div>
</body>
</html>
登入後複製

一、總體結構：

            頁以基本元件為DIV TABLE，固定的列以絕對定位的方式固定，每一列都要指定固定寬度，為了解決橫豎捲軸的問題，表頭和表體的外面分別包裹兩層DIV，外面分別滾動條採虛擬的方式，固定在固定位置透過JS控制模擬正常DIV捲軸的效果。

二、定位：

            固定的欄位要絕對定位，並透過left屬性控制左側位移，為了確保固定列浮動在上方，設定z-index為1,。為了確保有垂直滾動條時的正常顯示，表體的外層DIV為絕對定位，因此導致滾動條也都要絕對定位。還有，表頭和表體以及捲軸的內層DIV透過margin-left屬性控制左側外邊距，把固定列的偏移量空餘出來。

二、寬度計算：

            每一列的寬度都要指定固定的值，並且要注意一個關鍵點，就是還要加上min-width和max-width屬性，這兩個屬性和width值相等，表頭表體的內層DIV，寬度為auto，自適應表格寬度，外層DIV寬度為100%，最外層的DIV透過padding-right屬性控制右側內邊距，將垂直滾動條的位置空餘出來。

三、高度計算：

            因為絕對定位的存在，而整個表格組件的高度要指定，可由計算得出，垂直捲軸的top值也需要計算。

四、捲軸：

            本方案一個突出特點，是虛擬的捲軸，就是透過一個和表格一樣寬、高度為一個像素的DIV模擬出表體DIV的橫向滾動條，垂直滾動條同理。之所以採用這個形式，一個是橫向滾動條這樣處理比較美觀，豎滾動條這樣處理之後，表頭和表體的外層DIV寬度不用計算了，都為100%，否則存在滾動條時，表頭和橫向滾動條要空出垂直滾動條寬度的位移，否則無法對齊，這個計算倒不復雜，但是某些情況下存在問題，在此不展開了。

五、滾動事件：

            因為表體的捲軸都隱藏了，且導致滑鼠滾輪不起作用了，這樣就需要用JS處理滑鼠滾輪事件，而本文的範例程式碼則相容於常見瀏覽器。這裡的重點是同時寫了onmousewheel和onwheel事件，onmousewheel相容IE，在計算滾動距離時，注意deltaY和wheelDelta屬性的差異即可。

 六、優缺點分析：

            本文的解答已經經過精簡，重點在於講清楚原理，在我們的實際中，非常的複雜。這個設計考慮了非常多的兼容性，包括了瀏覽器的兼容性和各種場景的兼容性，如果需求簡單，還有簡化的空間。

            這個方案的優點是，如果要做組件的話，因為HTML結構簡單，表頭和表體都是一個TABLE，JS控製程式碼非常乾淨，維護容易。缺點就是計算過多。我們認為該方案比較適用於開發元件的情況，靜態頁面就有點小題大作了。

以上所述就是本文的全部內容了，希望大家能夠喜歡。

相關標籤：
table
來源：php.cn
上一篇：淺談javascript實作八大排序_javascript技巧 下一篇：JavaScript實作圖片DIV垂直滑動的方法_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何使用 jquery 檢索 HTML 資料表中未選定行的值 我試圖獲取所有未單擊按鈕的行的值。例如，當我單擊第一行上的按鈕時，我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...
來自於 2024-04-05 09:26:49
0
1
1418
檢索mysql中嵌套的相關值 我正在嘗試根據資料庫中的多個條目檢索相關值。在使用JOINs等方面，我對MySQL非常陌生，我試著避免不必要地涉及PHP。當我說「檢索巢狀相關值」時，請看以下範例："Pe...
來自於 2024-04-04 17:29:06
0
2
365
如何監聽特定的點擊事件但抑制其他的？ 我的網路應用程式包含一個HTML表格，其中每一行都連結到一個特定的URL：<table><trdata-url="https://www.google....
來自於 2024-04-04 16:55:27
0
1
317
垂直旋轉的表格標題，居中+底部對齊，跨瀏覽器 我的表格帶有旋轉標題，在Chrome中看起來符合預期，但在Firefox中卻不是。 Chromev108（垂直底部，水平中間）✅Firefoxv107（垂直中間，水平右）❌如何讓它...
來自於 2024-04-04 16:45:25
0
1
330
具有固定標題和旋轉列標題的表格 我有一個固定標題和固定第一列的表格。我還想將列標題旋轉45度。固定標題需要設定背景顏色。但是，這會導致45度旋轉標題出現問題，因為下一欄的背景與前一欄的文字重疊。以下是問題的範例：...
來自於 2024-04-03 08:50:32
0
1
362
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！