bootstrap table列和表头对不齐的解决方法
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头数据的div宽度不一样。
通过Chrome浏览器f12，看到样式为.fixed-table-header .fixed-table-body.fixed-table-footer的3个div容器宽度不一样， .fixed-table-header .fixed-table-footer这两个div没有滚动条。
解决方法：
bootstraptable在渲染完列表时会执行onPostBody事件，代码如下。
$('#dataGrid').bootstrapTable({
method:'post',
url:'http://www.itxst.com/?ajax',
dataType:"json",
striped:true,//隔行变色
pagination:true,//底部显示分页码
pageSize:30,//每页显示行数
pageNumber:1,//页码
pageList:[30,50,100,200,500],//每页显示数量选择器
idField:"objectId",//主键字段
showColumns:true,//显示隐藏列
showRefresh:true,//刷新按钮
singleSelect:true,
search:false,
clickToSelect:true,
sidePagination:"server",
queryParams:queryParams,
queryParamsType:"limit",
toolbar:"#toolbar",//设置工具栏的Id
columns:column,//要显示的列
silent:true,//刷新事件必须设置
formatLoadingMessage:function(){
return"it小书童正在加载中...";
},
formatNoMatches:function(){
return'未查询到结果';
},
onLoadError:function(data){
},
onClickRow:function(row){
window.location.href="/detail?id="+row.objectId;
},
onPostBody:function()
{
//重点就在这里，获取渲染后的数据列td的宽度赋值给对应头部的th,这样就表头和列就对齐了
varheader=$(".fixed-table-headertabletheadtrth");
varbody=$(".fixed-table-headertabletbodytrtd");
varfooter=$(".fixed-table-headertabletrtd");
body.each(function(){
header.width((this).width());
footer.width((this).width());
});
}
});
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。