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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
小粉粉hhh15 分钟前
Node.js(五)——编写接口
前端·javascript·node.js
大意的百合42 分钟前
Electron 应用如何上架微软商店:从 MSIX 打包到商店提交
javascript·microsoft·electron
自然 醒1 小时前
前端如何实现在线预览office常见文件功能?
前端·vue.js
肉肉不吃 肉1 小时前
前端调试跨域如何解决
前端·vue.js
weedsfly2 小时前
单例模式在前端中的正确打开方式
前端·javascript·面试
卓怡学长2 小时前
w268基于springboot + vue 物流系统
java·数据库·vue.js·spring boot·spring·intellij-idea
多加点辣也没关系15 小时前
JavaScript|第4章:类型转换
开发语言·javascript
yqcoder16 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
烬羽16 小时前
还在手动拼路径、写回调地狱?一文吃透 Node.js 的 path 和 fs
javascript·程序员·node.js
mONESY16 小时前
LangChain JS 高性能并行执行解析、工具调用底层封装
javascript