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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
一枚前端小能手2 小时前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
芒果茶叶2 小时前
深入浅出requestAnimationFrame
前端·javascript·html
歪歪1002 小时前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
渣哥2 小时前
Spring 创建 Bean 的多种方式对比与最佳实践
前端·javascript·面试
SanOrintea2 小时前
electron中进程线程之间通信方式
服务器·javascript·electron
Copper peas2 小时前
axios使用过程
前端·javascript·vue.js
枫,为落叶3 小时前
【vue】导出excel
前端·vue.js·excel
转转技术团队3 小时前
当 AI 走进前端开发:代理插件的全流程开发实践
前端·javascript·ai编程
晴殇i3 小时前
一行生成绝对唯一 ID:别再依赖 Date.now() 了!
前端·javascript·vue.js
GISer_Jing3 小时前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html