jQuery 固定表格標頭

Plugin 網址
Fixed Header Table

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

view plaincopy to clipboardprint

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。

view plaincopy to clipboardprint

1. $('#myTable').fixedHeaderTable({    
2.     footer: true,    
3.     cloneHeadToFoot: true,    
4.     altClass: 'odd'  
5. });  

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

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