bootstrapTable通过js加载到设置固定表头宽度

一、bootstrapTable通过js加载方法：

1、html中代码：

<div class="table-body">
<table id="hlxtable" class="tab"></table>
</div>2、js中调用

$(function() {
initTable();
initDate();

});

function initDate(){
$('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event, function(){
$(this).prev().focus();
});
$('input[name=date-range-picker]').daterangepicker().prev().on(ace.click_event, function(){
$(this).next().focus();
});

}

/**

 * 初始化表格数据

 */

function initTable(){
$('#hlxtable').bootstrapTable({
method : "GET",//请求方式
pagination : true,//分页
pageSize: 10,//每页大小
   pageNumber: 1,//初始化加载第一页
pageList: [5,10,50,100,200,500],  //允许选择的每页条数
sidePagination :  "server", //由服务器端完成分页功能
queryParams: queryParams,
queryParamsType: "limit",
//search: true,
url : basePath + 'views/pages/hlx/queryHlx.htm', // 获取数据的Servlet地址
columns : [  {
field : 'boxName',
align : 'center',
title : '汇流箱名称',
width : '100'
}, {
field : 'dataTime',
align : 'center',
title : '时间',
width : '200'
}, {
field : 'totalPower',
align : 'center',
title : '总功率',
width : '100'
}  , {
field : 'dl2',
align : 'center',
title : '一',
width : '100'
}, {
field : 'dl3',
align : 'center',
title : '二',
width : '100'
}, {
field : 'dl4',
align : 'center',
title : '电流4(A)',
width : '100'
}, {
field : 'dl5',
align : 'center',
title : '三',
width : '100'
}, {
field : 'dl6',
align : 'center',
title : '四',
width : '100'
}, {
field : 'dl7',
align : 'center',
title : '五',
width : '100'
}, {
field : 'dl8',
align : 'center',
title : '六',
width : '100'
}, {
field : 'dl9',
align : 'center',
title : '七',
width : '100'
}, {
field : 'dl10',
align : 'center',
title : '八',
width : '100'
}, {
field : 'dl11',
align : 'center',
title : '九',
width : '100'
}, {
field : 'dl16',
align : 'center',
title : '电流16(A)',
width : '100'
}]
});

}

至此js实现查询已完成。

二、bootstrap-table设置表头宽度无效的解决方案

1、首先将table的表头样式设置为固定的，然后在js中添加width宽度

.tab{

    table-layout: fixed;

}