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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
chenbin___20 分钟前
鸿蒙(HarmonyOS)支持 useNativeDriver的详细说明(转自千问)
前端·javascript·react native·react.js·harmonyos
iDao技术魔方24 分钟前
Bun v1.3.12 深度解析:新特性、性能优化与实战指南
开发语言·javascript·visual studio code
码喽7号38 分钟前
vue学习六:状态管理VueX
javascript·vue.js·学习
jiayong2338 分钟前
第 13 课:分页、页码状态和 URL 同步
开发语言·前端·javascript·vue.js·学习
阿正的梦工坊1 小时前
JavaScript 闭包 × C++ 类比:彻底搞懂闭包
开发语言·javascript·c++
丷丩1 小时前
第3篇:技术拆解|3dtubetilecreater 前后端架构全解析(Vue+Express+PostGIS)
vue.js·3d·架构
Hello--_--World2 小时前
Js 隐式类型转换、JavaScript `==` vs `===` 深度对比表
开发语言·javascript·ecmascript
凌冰_2 小时前
Thymeleaf 核心语法详解
java·前端·javascript
SuperEugene2 小时前
Vue3 配置文件管理:按模块拆分配置,提升配置可维护性|配置驱动开发实战篇
前端·javascript·vue.js·驱动开发
阿凤212 小时前
后端返回文件二进制流
开发语言·前端·javascript·uniapp