bootstrap table列和表头对不齐的解决方法


Posted in Javascript onJuly 19, 2019

我们在使用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,这样就表头和列就对齐了
 var header=$(".fixed-table-header table thead tr th");
 var body=$(".fixed-table-header table tbody tr td");
 var footer=$(".fixed-table-header table tr td");
 body.each(function(){
 header.width((this).width());
 footer.width((this).width());
 });
 }
});

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery选择器特辑 详细小结
May 14 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
You might like
ThinkPHP写第一个模块应用
2012/02/20 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
使用python实现rsa算法代码
2016/02/17 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
酒店中秋节促销方案
2014/01/30 职场文书
三严三实对照检查材料
2014/09/22 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
绿里奇迹观后感
2015/06/15 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python