1:纯html 实现

使用2个table 来做，第一个table 用来做表头【thead】，第二个table 用来做表体【tbody】

为了保证2个表的列的宽度是一致的，需要使用<colgroup> 标签。 代码如下：

完整代码如下：

1  2  3  4  5     
        6     
        7     
        8      9     
       10 11 12 13     
       
        14         
15             
16             
17         18         
         19 20             
          21                 
22                 
23             
24         
25     
                                                                  
         
          
编号
          
名称
         
        
       
26     
       
        27         
        
         28             
29                 
30                 
31             32             
          33                 
           34                     
35                     
36                 
37                 
           38                     
39                     
40                 
41                 
           42                     
43                     
44                 
45                 
           46                     
47                     
48                 
49             
50         
                                                                          
          
           
1
           
jack
          
          
           
2
           
tom
          
          
           
3
           
lily
          
          
           
4
           
west
          
         
        
51     
       
52 53 54 

 

2： github 上开源的bootstrap 插件  https://github.com/wenzhixin/bootstrap-table

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

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