在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况


表头对不齐效果:

解决的方法:

1、出现错位的原因是因为设置了固定表头 height 这个属性,只要去掉这个属性就不会出现错位的现象(当然使用这种方法以后表头就无法实现固定)

2、设置table的样式,给table元素添加 table-layout:fixed;经测试可以解决错位问题

有的时候当页面中有多个表格使用bootstrap-table的height属性以后,当浏览器的宽度发生改变是表头还是会出现错位的问题

解决的办法就是在每一个设置完展示的table数据后面都要加上

$('#el').bootstrapTable({

})

$(window).resize(function () {
  $("#el").bootstrapTable('resetView');
});

这样可以解决一个页面多个表格使用bootstrap-table的height属性导致的表头错位问题

使用bootstrap table 插件固定表头时 表头与表格内容无法对齐的更多相关文章

  1. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  2. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  3. bootstrap table 插件多语言切换

    在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...

  4. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  5. 在ASP.NET MVC中使用 Bootstrap table插件

    Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...

  6. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  7. [转]bootstrap的table插件动态加载表头

    原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...

  8. bootstrap table 插件 搜索

    以前用过easyui datagrid 每次搜索的时候调用datagrid构造方法 重新获取数据, 发现bootstrap-table 插件不行,只需要初始化一次, 以后每次搜索时,直接调用refre ...

  9. Bootstrap table插件 被选中的行颜色改变

    参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...

随机推荐

  1. UE4成批处理透明材质

    项目中需要控制成批的物体的透明度,但是默认的时候他又不能是透明的,对,项目的要求就这么诡异. 然而却没有找到设置材质的BlendMode的功能,于是只有换了一种办法,物体需要透明时更换为透明材质,默认 ...

  2. UNIX环境高级编程——单实例的守护进程

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <signal.h&g ...

  3. Java--Dom解析XML文件

          之前写过几篇关于Java中解析XML文件的方法,不过,感觉不够简单,今天重写了一遍代码,用到的是方法是Dom,其中加入了日志记录功能--Log4j.       好了,不多说了,先把XMl ...

  4. [java面试]javascript中dom取值问题radio名字一样归属于同一个组,求点击的是哪一个

    题目描述: 看如下的html文件,里面定义了一些radio类型的元素,请完成parse()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框. </pre><pre code ...

  5. (copy)赋值构造函数的4种调用时机or方法

    第一种调用方法: demo #include <iostream> using namespace std; class Text { public: Text() // 无参数构造函数 ...

  6. (九十)使用多个storyboard+代码实现控制器的分开管理

    使用单个storyboard会使得项目难与管理,使用纯代码又会过于麻烦,因此如果能将二者结合起来,并且使用多个storyboard,会使得项目简单简单.方便许多. 下面以一个简单的视图关系为例,介绍多 ...

  7. tomcat服务器虚拟目录的映射方式

    lWEB应用程序指供浏览器问的程序,通常也简称为web应用 l l一个web应用由多个静态web资源和动态web资源组成,如: •html.css.js文件 •jsp文件.servlet程序.支持ja ...

  8. 精通CSS+DIV网页样式与布局--CSS段落效果

    在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

  9. JSTL之forEach的使用详解(简单的技术说得很详细)

    在使用JSTL的核心标签库forEach之前,首先需要在JSP中通过taglib指令引入核心标签库: <%@ taglib uri="http://java.sun.com/jsp/j ...

  10. qualcomm memory dump 抓取方法

    Memory dump是系统出现crash时常用的分析故障原因的方法,qualcomm 各子系统运行时,为方便debug,都会开辟ram log和debug variable用于保存各系统运行信息及健 ...