当使用工具条中的显示/隐藏列的时候, 经常出现表格的列头与内容无法对齐的问题。

网上搜到两种处理方法,如下:

1. 去掉option中的height,完美对齐,但当数据较多的时候,table会自动增加height,显示所有数据而不显示滚动条。

2. 注释掉如下两行

//this.resetHeader();
//padding += this.$header.outerHeight();

完美对齐,但会导致无法冻结表头。

这两种结果都是鱼与熊掌不可兼得, 被影响的功能也是非常想要的,让小罗我很郁闷。

最后怀疑问题的原因应该是列的减少过程中,剩余列设置了宽度,但减少列后要填充剩余宽度时的计算问题。

 最后自己采用了如下方式,供大家参考:  

不设置其中一列的宽度,使其自动填充,如下代码

        <thead>
<tr>
<th data-field="Code" data-width="105px">编号</th>
<th data-field="Name" data-switchable="false">姓名</th>
<th data-field="Sex" data-width="120px">性别</th>
<th data-field="Age" data-width="120px">年龄</th>
<th data-field="LoloOperate" data-width="30px">操作</th>
</tr>
</thead>

这样只要不去掉名称,去掉其他列的时候不会出现对不齐的问题,为了防止此列被去掉,加上data-switchable="false"

正常业务中也经常会有这样要求自动填充宽度的列,算是比较好的一种解决方式。

Bootstrap table使用心得---thead与td无法对齐的问题的更多相关文章

  1. Bootstrap table使用心得

    序号显示带分页信息的连续编号,在序号列添加以下格式化代码即可. { field: 'number', title: '序号', align:'center', width:45, formatter: ...

  2. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  3. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  4. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  5. Bootstrap Table的例子(转载)

    转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...

  6. bootstrap table使用小记

    bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...

  7. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  8. Bootstrap Table 的用法

    记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...

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

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

随机推荐

  1. HTTP 和 HTTPS

    一.HTTP协议 最近看了一些网络通信方面的书籍,研究了一下 HTTP 和 TCP/IP,有了一些新的收获和理解,在这里做个归纳和总结. (1)什么是HTTP协议 HTTP (HyperText Tr ...

  2. 如何获取url中文件的后缀名

    这是今天给学生解答问题的时候学生问的一个问题,我就在班级里给学生整体讲了一下,现在做一下分享,大家一起学习!! $url = 'http://www.sina.com.cn/abc/de/fg.php ...

  3. OBS实现直播解决方案【html实现直播】

    项目的需要,要整一个视频直播,但又不想在其他平台那种直播室盗链展示,那我就直接用播放器来实现rtmp流媒体服务器推流吧!没废话,走起 1.你要有一个媒体服务器,暂时用[盘古云],这个还好,算是不错的平 ...

  4. Centos5搭建vsftpd服务

    更换镜像源 由于centos5已经历史久远,内置的镜像源已经不能用.看: 因此,我手工更换了阿里云的源.(ps:我本来是想用网易的源,但不知为什么,这个源在安装vsftpd时提示http 404错误) ...

  5. js 高级算法 - 动态规划

    主要是看了<数据结构与算法>有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中学习知识. 其实像在我们前端的开发中,用到的高级算法并不多,大部分情况if语句,for ...

  6. javaWeb学习总结(3)- Servlet基础

    Servlet的应用 Servlet是一种独立于平台和协议的服务器端的Java应用程序,可以生成动态的web页面.它担当Web浏览器或其他http客户程序发出请求. 与http服务器上的数据库或应用程 ...

  7. spring MVC 乱码问题

    (转) spring的字符集过滤通过用于处理项目中的乱码问题,该过滤器位于org.springframework.web.filter包中,指向类CharacterEncodingFilter,Cha ...

  8. Spring读取xml配置文件的原理与实现

    本篇博文的目录: 一:前言 二:spring的配置文件 三:依赖的第三方库.使用技术.代码布局 四:Document实现 五:获取Element的实现 六:解析Element元素 七:Bean创造器 ...

  9. Hadoop集群搭建(非HA)

    1.准备Linux环境 1.0先将虚拟机的网络模式选为NAT 1.1修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=itcast ### ...

  10. Hql没有limit,替换方案

    在HQL+MYSQL中不能直接在查询语句中使用LIMIT进行检索,正确方法为: String hql = "from User where id=? order by addDate des ...