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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
双普拉斯8 小时前
微信小程序通用弹窗组件封装与动画实现
javascript·html5
前端Hardy8 小时前
HTML&CSS: 在线电子签名工具
前端·javascript·canvas
biomooc8 小时前
D3.js 与数据可视化
开发语言·javascript·信息可视化
前端Hardy8 小时前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css
毕设十刻9 小时前
基于vue的考研信息系统6kv17(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
正义的大古9 小时前
OpenLayers地图交互 -- 章节八:平移交互详解
javascript·vue.js·交互·openlayers
LoveEate9 小时前
vue 在el-tabs动态添加添加table
javascript·vue.js·elementui
krifyFan9 小时前
vue3+elementPlus el-date-picker 自定义禁用状态hook 实现结束时间不能小于开始时间
前端·vue.js·elementui
一颗努力的大土豆9 小时前
关于解决switch开关属性中active-value=“1“为数值形失败的问题
javascript·vue.js·elementui
Liu.77410 小时前
vue3 中实现 Element Plus 表格合并
javascript·vue.js·elementui