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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
MageGojo2 小时前
做节日活动页时,如何用 API 快速生成对联内容
javascript·python·节日·对联生成
向上的车轮2 小时前
Next.js 入门指南:从零到一构建全栈应用
开发语言·javascript·ecmascript
freeinlife'2 小时前
精准秒表计时器实现---基于js
开发语言·前端·javascript
MaCa .BaKa2 小时前
55-宠物爱心救助领养系统-宠物救助领养系统
java·vue.js·tomcat·maven·springboot·宠物救助领养系统
优雅格子衫3 小时前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
AI砖家3 小时前
前端 JavaScript 异步处理全方案详解:从回调到 Observable
开发语言·前端·javascript
柒和远方3 小时前
每日一学V010: 从 Python 回到前端:一个 AI Native 开发者的 JavaScript 底层基础补全
javascript
之歆3 小时前
Day21_电商详情页核心技术实战:从LESS预处理到复杂交互实现
开发语言·前端·javascript·css·交互·less
海鸥两三3 小时前
基于 Vue 3 + 高德地图的网格规划系统实战(有源码)
前端·javascript·vue.js
逸A3 小时前
某里v2反混淆 codec 化路上踩到的两个隐蔽坑:被清零的 salt 与 opaque loop bound
javascript·人工智能·目标跟踪