bootstrapTable设置height属性后，表格内容与标题对不齐的问题【亲测解决】

问题背景：

    项目管理后台前端页面采用bootstrap框架，需求表格的标题需要冻结，也就是表格的标题固定不动，内容可以上下滚动，查询bootstrap框架文档，发现将表格设置height属性后，可以达到此需求，示例代码如下：

var h = $(window).height() - 250;//动态获取窗口高度
    $('#exampleTable').bootstrapTable("destroy")
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                url: prefix + "/list", // 服务器数据的加载地址
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                singleSelect: false, // 设置为true将禁止多选
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                height: h, //设置height属性后,达到冻结标题的目的
                queryParams: function (params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset: params.offset,
                        productNo: $('#productNo').val(),
                        productName: $('#productName').val()
                    };
                },
                columns: [
                    {
                        field: 'productNo',
                        title: '产品ID'
                    },
                    {
                        field: 'productName',
                        title: '产品名称'
                    },
                    {
                        field: 'supportStages',
                        title: '支持产品'
                    },
                    {
                        field: 'createTime',
                        title: '创建时间'
                    },
                    {
                        field: 'updateTime',
                        title: '修改时间'
                    },
                    {
                        title: '操作',
                        field: 'id',
                        align: 'center'
                    }]
            });

    但是问题来了。设置好height的属性后，发现页面的内容和标题无法对齐，效果如下：

解决过程：

    设置height属性后，bootstrapTable会自动生成一个包含标题名称的div，

    而原来生成的fixed-table-body里的标题名称，则由于margin-top:-36px被隐藏掉了。

    所以通过网上查找资料，找到了一个更改新生成标题的宽度width属性来达到内容与标题对齐的目的，但是网上找到的是修改bootstrap-table.js的源码，而我这里用的是bootstrap-table.min.js，但是解决问题的思路都是一致的。将代码格式化之后，得到如下内容：

解决办法：

    上图中红框的内容就相当于将原来的标题内容赋值给新生成的固定标题的内容，这里我们可以通过添加将原来标题的宽度赋值给新生成的固定标题的宽度的代码来解决。代码如下：

如果修改之后发现还是对不齐的话，就将如下代码注释掉，应该可以解决问题，代码如下：