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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
Mintopia12 小时前
🤖 通用人工智能(AGI)离 Web 应用还有多远?
前端·javascript·aigc
江城开朗的豌豆12 小时前
TypeScript泛型:让类型也"通用"的魔法
前端·javascript
江城开朗的豌豆12 小时前
TypeScript函数:给JavaScript函数加上"类型安全带"
前端·javascript
凌览12 小时前
Node.js + Python 爬虫界的黄金搭档
前端·javascript·后端
Java 码农12 小时前
vue 使用vueCli 搭建vue2.x开发环境,并且指定ts 和less
前端·vue.js·less
♡喜欢做梦12 小时前
Spring MVC 响应处理:页面、数据与状态配置详解
java·javascript·spring·java-ee
计算机学姐13 小时前
基于SpringBoot的公务员考试管理系统【题库组卷+考试练习】
java·vue.js·spring boot·后端·java-ee·intellij-idea·mybatis
chenbin___13 小时前
Omit<>的用法
开发语言·前端·javascript
逆风优雅13 小时前
vue 实现自定义message 全局提示
前端·javascript·vue.js
艾小码13 小时前
前端开发者必看!JavaScript这些坑我替你踩过了
前端·javascript