前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Bootstrap table使用心得---thead与td无法对齐的问题

Bootstrap table使用心得---thead与td无法对齐的问题

作者头像
FlyLolo
发布于 2018-05-17 07:14:09
发布于 2018-05-17 07:14:09
2.6K00
代码可运行
举报
文章被收录于专栏:Core NetCore Net
运行总次数:0
代码可运行

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

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

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

2. 注释掉如下两行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//this.resetHeader();
//padding += this.$header.outerHeight();

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        <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"

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-07-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
接口测试平台代码实现56:首页重构-4
本节继续开发首页右侧的显示效果,可能有的同学觉得这里节奏太慢了,不怕,咱养肥再看。
我去热饭
2022/05/19
1.4K0
接口测试平台代码实现56:首页重构-4
【JavaEE初阶】HTML
前端代码的运行环境是浏览器,浏览器就像Java中的JVM一样,浏览器可以解析html,css,js等代码中的内容,根据代码去后构造前端页面。
xxxflower
2023/10/16
2150
【JavaEE初阶】HTML
滚动条下拉时 table 的thead 固定在网页固定在顶部不动
一、效果图 image.png 二、前端页面 核心代码: 1、固定顶部 position:fixed;top:0px 2、左右滚动条 OVERFLOW-X: scroll;width:720px; 3、时间内容越出单元格显示 position: relative;bottom:30px; <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/WEB-INF/views/inclu
week
2018/08/24
2.8K0
滚动条下拉时 table 的thead 固定在网页固定在顶部不动
BootStrap-table的使用实现排序功能
BootStrap-table的使用实现排序功能 1.Bootstrap table 官网地址: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 2.下载相应的包后引入 <script src="./js/jquery-3.1.1.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="./bootstrap-3.3.
Dream城堡
2018/12/07
2.2K0
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/09/10
13.1K0
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
uni-app 非常易用的表格控件,用来排版展示很好用
加菲猫的VFP
2023/11/10
1.3K0
uni-app 非常易用的表格控件,用来排版展示很好用
解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐
含有data-show-columns="true"属性时会在右边显示可以切换列的按钮
tianyawhl
2019/04/04
5.7K0
前端开发---使用bootstrap-table展示物联网数据
下面我们使用它开发页面来查询HJ 212协议传输过来的物联网传感器数据。基于前端的列排序,隐藏列,模糊搜索,列搜索,翻页都是对bootstrap-table简单的配置自动完成的。同时使用daterangepicker插件来选择时间范围,以及可以将查询出来的数据后台导出为Excel。
MiaoGIS
2020/11/26
1.5K0
前端开发---使用bootstrap-table展示物联网数据
css笔记 - 张鑫旭css课程笔记之 margin 篇
relative可定位,但是不改变容器尺寸和占据的空间 margin不同,margin也在盒模型中。 从border开始往里边,是可视尺寸clientWidth部分。 加上margin,是占据尺寸outerWidth margin可以改变元素尺寸,正值宽度变小,负值宽度变大。 margin也可以定位
xing.org1^
2018/09/20
2.6K0
css笔记 - 张鑫旭css课程笔记之 margin 篇
javaWeb核心技术第十四篇之easyui
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
海仔
2019/09/18
1.2K0
Vue ElementUI table给表格一个斜线分隔线
1、去掉第一个单元格的下边框/ 2、第一列第一个单元格和第二个单元格的伪元素设置绝对定位,宽度设成1px,高度根据自己表格调整 3、通过旋转两个单元格伪元素,并设置旋转起始点,使两个伪元素旋转到重合位置,达到斜线的效果
江一铭
2022/06/16
1.5K0
Vue ElementUI table给表格一个斜线分隔线
CSS 7:网页布局(传统布局,flex布局,布局套路)
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
代码之风
2019/03/14
4.1K0
CSS 7:网页布局(传统布局,flex布局,布局套路)
python测试开发django-120.bootstrap-table表格添加操作按钮(查看/修改/删除)
接着前面这篇https://www.cnblogs.com/yoyoketang/p/15242055.html 在columns最后添加一个操作项,formatter属性可以帮助我们更加灵活的显示表格中的内容
上海-悠悠
2021/09/14
1K0
bootstrap table表格内容居中对齐
官方网站: http://bootstrap-table.wenzhixin.net.cn/ 参考文档:http://issues.wenzhixin.net.cn/bootstrap-table/index.html 中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table
王小婷
2019/07/24
4.6K0
最新jquery+easyui_api培训文档
1 Accordion(可折叠标签) 1.1 实例 1.1.1 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text
用户1112962
2018/07/03
3.3K0
「资深前端工程师总结」前端面试知识点大全—CSS篇
display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;元素原来占据的空间位置不保留;产生回流和重绘;
用户5997198
2019/08/09
1.6K0
「资深前端工程师总结」前端面试知识点大全—CSS篇
一篇文章带你了解CSS基础知识和基本用法
相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是,Css相当于Html的一个美化装置,所以它必须依赖于Html才能发挥作用,那么今天我们就来深入了解下它吧。
前端皮皮
2020/11/26
11.2K0
一篇文章带你了解CSS基础知识和基本用法
jQuery EasyUI 详解
easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。
老马
2018/07/31
9.2K0
jQuery EasyUI 详解
Bootstrap学习笔记上(带源码)
☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
牧云云
2022/03/11
3.8K0
Bootstrap学习笔记上(带源码)
如何把控css的方向感
在介绍完问题学习法之后,进入我们今天的主题,接下来我会介绍css的一些底层的知识和比较诡异的现象,借此来让大家对css有更深入的理解。
徐小夕
2019/08/08
1.2K0
如何把控css的方向感
推荐阅读
相关推荐
接口测试平台代码实现56:首页重构-4
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文