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

先看问题截图:

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

解决思路:

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

看解决之后的效果:

看代码:

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

		table {
			width: 100% !important;
		}
	}
相关推荐
1024小神37 分钟前
vue3 + vite项目,如果在build的时候对代码加密混淆
前端·javascript
轻语呢喃1 小时前
useRef :掌握 DOM 访问与持久化状态的利器
前端·javascript·react.js
橙某人2 小时前
🖼️照片展示新境界!等高不等宽自适应布局完整教程⚡⚡⚡
前端·javascript·css
尝尝你的优乐美2 小时前
man!在console中随心所欲的打印图片和字符画
前端·javascript·vue.js
paopaokaka_luck3 小时前
校园快递小程序(腾讯地图API、二维码识别、Echarts图形化分析)
vue.js·spring boot·后端·小程序·uni-app
掘金013 小时前
Vue3 项目中实现特定页面离开提示保存功能方案
javascript·vue.js
余_弦3 小时前
区块链钱包开发(十九)—— 构建账户控制器(AccountsController)
javascript·区块链·以太坊
前端Hardy3 小时前
HTML&CSS:有趣的小铃铛
javascript·css·html
起这个名字3 小时前
Vue2/3 v-model 使用区别详解,不了解的来看看
前端·javascript·vue.js
sorryhc4 小时前
H5大视频上传治理
前端·javascript·性能优化