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>
2： github 上开源的bootstrap 插件 https://github.com/wenzhixin/bootstrap-table
3：http://www.fixedheadertable.com/
4：https://datatables.net/extensions/fixedheader/