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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
YL有搞头1 天前
VUE的模版渲染过程
前端·javascript·vue.js·面试·模版渲染
ai产品老杨1 天前
以技术共享点燃全球能源变革新引擎的智慧能源开源了
javascript·人工智能·开源·音视频·能源
EndingCoder1 天前
集成 Node.js 模块:文件系统与网络操作
javascript·网络·electron·前端框架·node.js
gnip1 天前
文件操作利器:showOpenFilePicker
前端·javascript
Sui_Network1 天前
Yotta Labs 选择 Walrus 作为去中心化 AI 存储与工作流管理的专用数据层
大数据·javascript·人工智能·typescript·去中心化·区块链
某公司摸鱼前端1 天前
一键 i18n 国际化神库!适配 Vue、React!
前端·vue.js·react.js·i18n
大家的林语冰1 天前
Promise 再次进化,ES2025 新增 Promise.try() 静态方法
前端·javascript·ecmascript 6
大家的林语冰1 天前
如何错误手写 ES2025 新增的 Promise.try() 静态方法
前端·javascript·ecmascript 6
给月亮点灯|1 天前
Vue基础知识-重要的内置关系:vc实例.__proto__.__proto__ === Vue.prototype
前端·vue.js·原型模式
yuehua_zhang1 天前
uni app 的app 端调用tts 进行文字转语音
前端·javascript·uni-app