jQuery 固定表格標頭

fix-table-head

Plugin 網址
Fixed Header Table

最近在寫 UI 的時候有一個需求是希望表格太長時,往下捲動可以讓標頭固定在上方,可是 html 的 table 元素很特別,沒辦法很簡單的固定在上方,再找怎麼寫css的時候,就找到了這支 plugin ,因為太好用了,所以就直接拿來用了。

  1. <table class="fancyTable" id="myTable" cellpadding="0" cellspacing="0">  
  2.                     <thead>  
  3.                         <tr>  
  4.                             <th>Browser</th>  
  5.                             <th>Visits</th>  
  6.                             <th>Pages/Visit</th>  
  7.                             <th>Avg. Time on Site</th>  
  8.                             <th>% New Visits</th>  
  9.                             <th>Bounce Rate</th>  
  10.                         </tr>  
  11.                     </thead>  
  12.                     <tbody>  
  13.                         <tr>  
  14.                             <td>Firefox</td>  
  15.                             <td>1,990</td>  
  16.                             <td>3.11</td>  
  17.                             <td>00:04:22</td>  
  18.                             <td>70.00%</td>  
  19.                             <td>32.61%</td>  
  20.                         </tr>  
  21.                     </tbody>  
  22. </table>  

準備類似這樣的 html ,注意使用 thead 跟 tbody 的標籤,這個是要讓 plugin 判斷哪邊是標頭哪邊是內容的。

然後開開心心用 plugin。
  1. $('#myTable').fixedHeaderTable({    
  2.     footer: true,    
  3.     cloneHeadToFoot: true,    
  4.     altClass: 'odd'  
  5. });  

Demo
更多用法,也可以參考官方的文件。

記得要用他的CSS,不然就GG了。

留言