建立 表頭固定 的表格 table fixed header
阿新 • • 發佈：2019-01-05
1:純html 實現
使用2個table 來做，第一個table 用來做表頭【thead】，第二個table 用來做表體【tbody】
為了保證2個表的列的寬度是一致的，需要使用<colgroup> 標籤。 程式碼如下：
完整程式碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"View Code> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 10 </head> 11 12 <body> 13 <table class="table table-hover table-bordered"> 14 <colgroup> 15 <col style="width:10%;"> 16 <col> 17 </colgroup> 18 <thead> 19 20 <tr> 21 <th>編號</th> 22 <th>名稱</th> 23 </tr> 24 </thead> 25 </table> 26 <div style="height:80px;overflow-y: scroll; margin-top: -20px;"> 27 <table class="table table-hover table-bordered"> 28 <colgroup> 29 <col style="width:10%;"> 30 <col> 31 </colgroup> 32 <tbody> 33 <tr> 34 <td>1</td> 35 <td>jack</td> 36 </tr> 37 <tr> 38 <td>2</td> 39 <td>tom</td> 40 </tr> 41 <tr> 42 <td>3</td> 43 <td>lily</td> 44 </tr> 45 <tr> 46 <td>4</td> 47 <td>west</td> 48 </tr> 49 </tbody> 50 </table> 51 </div> 52 </body> 53 54 </html>
2： github 上開源的bootstrap 外掛 https://github.com/wenzhixin/bootstrap-table
3：http://www.fixedheadertable.com/
4：https://datatables.net/extensions/fixedheader/