el-table固定高度,数据多出现滚动条,表头和内容对不齐

先看问题截图:

由于给el-table设置了固定高度,当表格内容数据过多时,内容区域右侧就会出现滚动条,而内容区域的宽度加上滚动条的宽度是整个表格的宽度。而表头的宽度是整个表格的宽度,最终就是导致表头和表格内容对不齐。

解决思路:

将表头的宽度设置为整个表格的宽度减去滚动条的宽度(8px),这样表头的宽度就等于表格内容的宽度,对不齐的问题就解决了。

看解决之后的效果:

看代码:

css 复制代码
::v-deep {
		.el-table__header-wrapper {
			// 这里我设置的纵向滚动条宽度为8px
			width: calc(100% - 8px);
		}

		table {
			width: 100% !important;
		}
	}
相关推荐
青青家的小灰灰10 分钟前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
北冥有鱼11 分钟前
JSON或代码对比的工具-vue
vue.js
SuperEugene11 分钟前
组合式函数 、 Hooks(Vue2 mixin 、 Vue3 composables)的实战封装
前端·javascript·vue.js
wuhen_n28 分钟前
模板编译三阶段:parse-transform-generate
前端·javascript·vue.js
滕青山32 分钟前
正则表达式测试 在线工具核心JS实现
前端·javascript·vue.js
不可能的是33 分钟前
前端图片懒加载方案全解析
前端·javascript
wuhen_n33 分钟前
Fragment 与 Portal 的特殊处理
前端·javascript·vue.js
用户57573033462443 分钟前
🚀 JS事件机制大揭秘:从“橘子”报警到“列表”瘦身,前端老鸟都在偷笑的秘密!
javascript
用户5757303346241 小时前
💎 JS 中的“隐形人”:Symbol 数据类型深度解密!从命名冲突到隐私保护
javascript
掘金安东尼1 小时前
Fun with TypeScript Generics:玩转 TS 泛型
前端·javascript·面试