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">
 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>
View Code

 

2: github 上開源的bootstrap 外掛  https://github.com/wenzhixin/bootstrap-table

3:http://www.fixedheadertable.com/

4:https://datatables.net/extensions/fixedheader/