Bootstrap table使用心得---thead与td无法对齐的问题
当使用工具条中的显示/隐藏列的时候, 经常出现表格的列头与内容无法对齐的问题。
网上搜到两种处理方法,如下:
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无法对齐的问题的更多相关文章
- Bootstrap table使用心得
序号显示带分页信息的连续编号,在序号列添加以下格式化代码即可. { field: 'number', title: '序号', align:'center', width:45, formatter: ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- Bootstrap Table的例子(转载)
转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...
- bootstrap table使用小记
bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...
- bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- Bootstrap Table 的用法
记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
随机推荐
- 自己实现so加载器
在进行安全研究中,我们需要经常使用ida等工具对app的so进行动态调试.这其中遇到的最大问题可能就是app加了反调试.反root等保护手段对应用运行环境进行检测,而这些手段往往是在我们附加进程之前就 ...
- Hadoop中MapReduce作业流程图
MapReduce的流程分为11个步骤,4个实体 1.客户端:编写MapReduce的代码,配置作业,提交作业 2.JobTracker:初始化作业,分配作业,与TaskTracker通信,协调整个作 ...
- struts2.3.23升级到struts2.3.32
新的漏洞 3月8号去审计厅培训系统的使用,那边计算机中心的负责人递过来一张如下图所示的文档,意思是发现了struts2的漏洞,需要进行修复. 在培训前,我登录到服务器中,看到了项目中,所有的服务器中应 ...
- Java Class Loader
Reference: [1] http://www.cnblogs.com/kevin2chen/p/6714214.html 当调用 java命令运行一个java程序时,会启动一个java虚拟机进程 ...
- 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 在Spring、Hibernate中使用Ehcache缓存(2)
这里将介绍在Hibernate中使用查询缓存.一级缓存.二级缓存,整合Spring在HibernateTemplate中使用查询缓存.,这里是hibernate3,使用hibernate4类似,不过不 ...
- 开涛spring3(9.1) - Spring的事务 之 9.1 数据库事务概述
9.1 数据库事务概述 事务首先是一系列操作组成的工作单元,该工作单元内的操作是不可分割的,即要么所有操作都做,要么所有操作都不做,这就是事务. 事务必需满足ACID(原子性.一致性.隔离性和持久性 ...
- Lua学习(4)——函数
在Lua中函数的调用方式和C语言基本相同,如:print("Hello World")和a = add(x, y).唯一的差别是,如果函数只有一个参数,并且该参数的类型为字符串常量 ...
- C# 特性(Attribute)
个人定义:不侵入对象的情况下,添加对象附注信息. 官方定义:将预定义的系统信息或用户定义的自定义信息与目标元素相关联.目标元素可以是程序集.类.构造函数.委托.枚举.事件.字段.接口.方法.可移植可执 ...
- 隐马尔科夫模型HMM(四)维特比算法解码隐藏状态序列
隐马尔科夫模型HMM(一)HMM模型 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数 隐马尔科夫模型HMM(四)维特比算法解码隐藏状态 ...