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 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
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
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
js常见表单应用技巧
2008/01/09 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
原生JS轮播图插件
2017/02/09 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python实现井字棋小游戏
2020/03/04 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
Java基础知识面试题
2014/03/25 面试题
审核会计岗位职责
2013/11/08 职场文书
工作个人的自我评价
2014/01/14 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
小学生红领巾广播稿
2015/08/19 职场文书