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,这样就表头和列就对齐了
 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());
 });
 }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • bootstrap-table组合表头的实现方法

    bootstrap-table组合表头的实现方法

    最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家,  1.效果图 2.html代码 <table id="table"></table> 3.javascript代码 $("#table").bootstrapTable({ dataType: "json", method: 'get', contentType: "application/x-www-form-urlencoded",

  • 基于Bootstrap table组件实现多层表头的实例代码

    基于Bootstrap table组件实现多层表头的实例代码

    在做私活的时候,有一个需求是要在页面上实现多层表头.一开始有点懵,不知道怎么来实现,我回想起在JFTT的时候,曾用过Flex版的多层表头,不过那离现在已经很久远了,久远到Flex已经被淘汰出局了.于是在网上折腾了好一会儿,终于找到一款用起来简单,效果又很不错的组件--Bootstrap-table. Bootstrap-table还有很多强大的功能,但这篇文章我们把关注点只放在多层表头上,关注点确定后,这篇博客就很简单了,但我觉得还是很有必要推而广之--因为之前在看董卿主持的<诗词大会>,里面

  • BootStrap Table 设置height表头与内容无法对齐的问题

    首先说下我遇到的问题,就是设置表格的height后先加载所有数据再隐藏除第一条外的数据(即只显示第一条数据)发现表头与内容无法对齐,在网上也找了很多解决方法,但效果都不太理想,最后还是老老实实调样式,发现我们所看到的表头就是".fixed-table-header"这样一个div,而原来的表头因为margin-top而看不见了,而这个表头与内容是对齐的,因此就可以设置".fixed-table-header"的每一个"th"的宽度来实现对齐,于是

  • bootstrap table插件动态加载表头

    bootstrap table插件动态加载表头

    bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表加载的数据需求不同,所以需要动态的更换表头. 网上有很多加载表格数据的例子,但是却没有找到如何动态加载表格,再加在数据. 虽然可以一个表格加载一种数据,但是本着学习的态度尝试了下这种方式,结果发现是可以执行的.分享下思路和实现过程,以备日后使用. 思路: 1.写接口,查询出要展示的列.注意接口中必须要有字段中文名称(columns属性的title值),字段的英文名称(columns的field字段),特别注意filed

  • BootStrap的table表头固定tbody滚动的实例代码

    关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • bootstrap-table实现表头固定以及列固定的方法示例

    之前使用bootstrap写了一个报表表格,最近突然找到我,说让我看看能不能将表格的表头和第一列进行固定,这样的话方便查看数据,于是,我开始了苦逼的研究起来,毕竟我是个后端啊,对于前端的样式问题,特别是小功能,烦的一批 这里就记录下我的研究成果 一:引入js和css <!-- 引入jquery --> <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></scri

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

    我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐.出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样. 通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个

  • Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接: http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后,找到Resizable插件,点击Home进入github可以找到详细的

  • Bootstrap table列上下移动效果

    Bootstrap table列上下移动效果

    本文实例为大家分享了Bootstrap table列上下移动效果的具体代码,供大家参考,具体内容如下 排序 1. 按钮排序 点击排序按钮,页面的序号变为可点击的方向键,实现手动排序(第一行没有下箭头,最后一行没有上尖头) 实现方式 1.击则“编辑”,改变内容 <button class="btn btn-info editBtn" style="display:inline-block" onclick="handleTableEditBtn(thi

  • 关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题 可以通过在 input 输入框之外 嵌套 <span style="posit

  • 基于layui table返回的值的多级嵌套的解决方法

    我在学习layui的过程中遇到了table返回值的问题,如果服务器端返回给你的数据是多级嵌套的话,那你在前台是解析不了的,在table.js源码中 它渲染数据是用了 data = res[options.response.dataName] || [] 这个意味着它源码不支持嵌套数据 举个例子把 比如服务器端返回的数据中data>dataList>list 把这个数据返回给前段解析出来的是 res[data.dataList.list]类似这种的结构,当然解析不了,所以我写了一个方法处理返回的

  • Mysql报Table 'mysql.user' doesn't exist问题的解决方法

    Mysql报Table 'mysql.user' doesn't exist问题的解决方法

    目录 发现问题 问题起源: 排查记录: 总结 发现问题 前天突然出现了这个问题,花费了很多时间去解决问题.记录一下,希望能给大家避坑 问题起源: 周六,windows本地的mysql还能正常使用,周日早上,使用navicat连接本地mysql,一直报连接拒绝. 排查记录: 1 首先博主,去查看了一下本地Mysql服务是否启动,经过查看发现Mysql服务关闭,且无法启动. 2 因需要先确定Mysql服务无法启动的原因, 所以,去查看了一下系统的日志. 3 确定了问题,是因为Mysql自身报错,信息

  • bootstrap table分页模板和获取表中的ID方法

    1.dao层 MyBatis映射 mapper.xml中 <select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap"> select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order} </select> mapper.java中 pub

  • bootstrap table.js动态填充单元格数据的多种方法

    bootstrap-table.js动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法: 方法一:全部自动填充table <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 引入 echarts.js --> <script typ

  • 网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法

    网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示.于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失.后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件. 解决方法1:在Web.config配置文件中添加woff字体的MIME类型 解放方法2:在IIS中添加woff字体的MIME类型 woff字体

随机推荐