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. 需要实现的是:表格头部固定,并且支持水平滚 ...
随机推荐
- STM32采集电阻触摸贴膜
今天为了解决一个测量电阻屏压力的问题,自己直接用STM32做了一个测量电阻屏的程序(直接把触摸屏的四根线接到单片机引脚上),通过AD切换采集,采集X轴电压,Y轴电压,和压力..最后附上自己的程序 先说 ...
- Longest Palindromic Substring2015年6月20日
Given a , and there exists one unique longest palindromic substring. 自己的解决方案; public class Solution ...
- C# 关于操作datatable的列名和删除某一列的数据
1.获取一个数据集表 DataTable dt = selectDEGS(type, words, KUser); 2.删除某一列 dt.Columns.Remove("TaskID&quo ...
- 使用公共 Registry - 每天5分钟玩转 Docker 容器技术(19)
保存和分发镜像的最直接方法就是使用 Docker Hub. Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像保存到 Docker Hub 免费的 repo ...
- Pandas日期数据处理:如何按日期筛选、显示及统计数据
前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据 按日期显示数据 按日期统计数据 运行环境为 windows ...
- Intel CPU命名规则的简略解析
Intel的CPU命名规则一直不是特别清楚,而网上的很多解读是不准确,甚至是错误的,应该以官方文档为准.所以我在查阅官方资料的基础上,以一种简明扼要的方式记录下来.值得说明的是,这个解析只是简略的,一 ...
- node使用消息队列RabbitMQ一
基础发布和订阅 消息队列RabbitMQ使用 1 安装RabbitMQ服务器 安装erlang服务 下载地址 http://www.erlang.org/downloads 安装RabbitMQ 下载 ...
- socket.io搭配pm2(cluster)集群解决方案
socket.io与cluster 在线上系统中,需要使用node的多进程模型,我们可以自己实现简易的基于cluster模式的socket分发模型,也可以使用比较稳定的pm2这样进程管理工具.在常规的 ...
- Android6.0-运行时权限处理
为什么需要有运行时权限? 大家都知道在Android6.0之前,权限在应用安装过程中只询问一次,以列表的形式展现给用户,如果点击取消(即不认可应用所申请的权限),则会取消应用的安装.而用户出于安装应用 ...
- Java经典编程题50道之十八
两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人,以抽签决定比赛名单.有人向队员打听比赛的名单:a说他不和x比,c说他不和x. z比.请编程序找出三队赛手的名单. publi ...