IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> bootstrapTable固定头固定列之后的对齐问题 -> 正文阅读

[JavaScript知识库]bootstrapTable固定头固定列之后的对齐问题

首先有条件的话,换吧!!!

下面组件指的是bootstrapTable

1、固定列之后出现行不对齐,行越多越明显

主要原因是因为固定的列行高和内容行高不一样,这里举个例子: 固定列加粗了字体, 内容没有加粗. 反之同理. 其余的自己找原因

2、固定头之后表格滚动起来,出现列不对齐

这里会说两个原因
1、误差
表头的宽度设置是获取下面第一行列的宽度设置的, 由于每列的宽度是自适应的, 所以实际宽度会出现小数, 但是jQuery获取的时候是整数, 这就会造成误差, 列越多误差就越大
2、滚动条
固定列肯定是因为表格太高固定高度滚动,于是表格内容就会出现滚动条, 滚动条也是有宽度的, 这就造成了表格滚动到最后可以多向右滚动一点, 这个宽度就是滚动条宽度

3、表头固定, 且表头为复杂表头

具体原因就不清楚了, 表头初始化时候是设置了宽度的, 表头在这种情况下会自适应, 组件控制表头的方式就是通过里面的一个没有高度只有宽度的元素撑开的, 但是外部的th自适应了,甚至比这个元素都宽, 那组件想通过它控制宽度也就自然没用了.
出现严重对不齐的时候就是屏幕比较宽的时候, 如果屏幕够窄, 表格需要横向滚动, 那对不齐的现象就没那么严重.
这种情况的解决方案就是给table加上一个css属性

table {
	table-layout: fixed;
}

这个应该熟悉了, 网上常搜出来的就是这个了
这里加的table是所有table, 组件生成table的时候会有好几个table, 要一起加上去
加这个属性之后会发现表格对齐了, 但是也不能左右滚动了, 至于表头内容显示 … 这个就是css的属性, 自己设置吧

总结

第二种情况没有给出方案, 主要是得修改源码, 而且治标不治本
2.1 修改源码获取宽度的方式, 换成精确值就行了, 自行百度. 即使改完了也不是100%对齐的, 不知道为啥. 但是比之前好点
2.2 去掉滚动条就行了, 不要想着要滚动条还得不占宽度, 除非自己实现一个滚动条. 不会有人去做吧
3 自己取舍吧, 没有完美的

还是那句话, 可以的话换吧, 都什么年代了还用它

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-30 18:14:48  更:2022-03-30 18:18:09 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 4:53:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码