需要的文件下载：

bootstrap-table:https://github.com/wenzhixin/bootstrap-table

bootstrap-table-fiex-column:https://github.com/wenzhixin/bootstrap-table-fixed-columns

参考来源：https://www.cnblogs.com/Kyaya/p/9004237.html

1.引入文件

2. bootstrap-table有两种方式，html、js

     
      true 会有隔行变色效果           data-show-toggle="true" //是否显示切换视图（table/card）按钮。           data-search="true" //是否显示搜索框           data-show-refresh="true" //是否显示刷新按钮           data-toolbar="#toolbar"  //工具栏           data-height="500">  //设置表格高度-固定表头生效        
      
               
                    
表格 ID
                    
表格 Name
                    
表格 Price
                    
表格 Price
                    
表格 Price
                    
表格 Price
                    
表格 Price
                    
表格 Price
                    
表格 Price
                    
表格 Price
                    
表格 Price
               
              
              
               
                    
1
                    
Item 1
                    
$1
                    
Item 1
                    
$1
                    
Item 1
                    
$1
                    
Item 1
                    
$1
                    
Item 1
                    
$1
               
               
                    
2
                    
Item 2
                    
$2
                    
Item 1
                    
$1
                    
Item 1
                    
$1
                    
Item 1
                    
$1
                    
Item 1
                    
$1
               
      
     

js方式

　　

3.问题解决

　　固定表头展示错位

　　解决办法：给 th 添加宽度 data-width="60px"

　　固定列也会错位

　　解决办法：所有内容不折行，展示在一行（感觉应该是line-height导致的差异）

　　固定表头固定列重叠的表头部分左右滚动的时候 没有固定

　　解决办法：重叠部分手动加了层级

　　当浏览器窗口变化是，表头与表格不对齐，应该怎么办？

$('#tableId').bootstrapTable(); // init via javascript    $(window).resize(function () {        $('#tableId').bootstrapTable('resetView');    });