需要的文件下载：
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
<table id="table" class="table table-bordered table-hover"data-toggle="table" //启用bootstrap表格data-classes="table table-hover"data-show-columns="true" //是否显示内容列下拉框。data-striped="true" //设置为 <code>true</code> 会有隔行变色效果data-show-toggle="true" //是否显示切换视图（table/card）按钮。data-search="true" //是否显示搜索框data-show-refresh="true" //是否显示刷新按钮data-toolbar="#toolbar" //工具栏data-height="500"> //设置表格高度-固定表头生效<thead><tr><th>表格 ID</th><th>表格 Name</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th><th>表格 Price</th></tr></thead><tbody><tr><td>1</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td></tr><tr><td>2</td><td>Item 2</td><td>$2</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td><td>Item 1</td><td>$1</td></tr>
</table>
js方式
<table id="table"></table>
<script>$("#table").bootstrapTable({toolbar: "#toolbar",striped: true, //是否显示行间隔色height:300,sortable: false,//是否排序search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端strictSearch: true, //是否显示刷新showColumns: true, //是否显示所有的列showRefresh: true, //是否显示刷新按钮minimumCountColumns: 2, //最少允许的列数showToggle:true, //是否显示详细视图和列表视图的切换按钮cardView: false, //是否显示详细视图columns: [{field: 'id',title: 'Item ID'}, {field: 'name',title: 'Item Name'}, {field: 'price',title: 'Item Price'}],
// data可以换成urldata: [{id: 1,name: 'Item 1',price: '$1'}, {id: 2,name: 'Item 2',price: '$2'}, {id: 3,name: 'Item 3',price: '$3'}, {id: 4,name: 'Item 4',price: '$4'}, {id: 5,name: 'Item 5',price: '$5'}, {id: 6,name: 'Item 6',price: '$6'}, {id: 7,name: 'Item 7',price: '$7'}, {id: 8,name: 'Item 8',price: '$8'}, {id: 9,name: 'Item 9',price: '$9'}, {id: 10,name: 'Item 10',price: '$10'}]})
</script>
3.问题解决
固定表头展示错位
解决办法：给 th 添加宽度 data-width="60px"
固定列也会错位
解决办法：所有内容不折行，展示在一行（感觉应该是line-height导致的差异）
固定表头固定列重叠的表头部分左右滚动的时候 没有固定
解决办法：重叠部分手动加了层级
当浏览器窗口变化是，表头与表格不对齐，应该怎么办？
$('#tableId').bootstrapTable(); // init via javascript$(window).resize(function () {$('#tableId').bootstrapTable('resetView');});
