美化表头
Bootstrap Table要固定表头只需要设置高度就可以实现，但是滚动条引起的效果实在不美观，如下图。
添加以下样式，美化这个区域：
.fixed-table-header {border-right: solid 1px #ddd;border-top: solid 1px #ddd;}.fixed-table-header table {border-top: solid 0px #ddd !important;margin-top:-1px;}
美化后效果,新增的边线就和滚动条对称了，看起来相对美观了不少
完整代码
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script><link href="/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" /><link href="/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" /><script src="/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script><title>Bootstrap Table入门例子</title><style>.table-demo {width: 80%;margin: 30px auto 0px auto;}.fixed-table-header {border-right: solid 1px #ddd;border-top: solid 1px #ddd;}.fixed-table-header table {border-top: solid 0px #ddd !important;margin-top:-1px;}/*定义类名为.thead-blue的样式*/ .table .thead-blue th {color: #fff;background-color: #3195f1;border-color: #0d7adf;}.bg-blue {background-color: #0074D9 !important;}.bg-green {background-color: green !important;}.bg-red {background-color: red !important;}</style></head><body ><div class="table-demo"><table id="table"></table></div><script>//设置需要显示的列var columns = [{field: 'Id',title: '编号'}, {field: 'ProductName',title: '产品名称'}, {field: 'StockNum',title: 'Item 库存'}];//bootstrap table初始化数据$('#table').bootstrapTable({columns: columns,data: getData(),classes: "table table-bordered table-striped table-sm table-dark", height: 400,rowStyle: function(row, index) {var classes = ['bg-blue','bg-green','bg-red']if (index % 2 === 0 && index / 2 < classes.length) {return {classes: classes[index / 2]}}return {css: {color: 'blue'}} }});function getData(){var data = [];for (var i = 0; i < 50; i++){var item = {Id: i,ProductName: '苹果',StockNum: '200'};data.push(item);};return data;}</script></body></html>
