ElementUI 表格固定列遮挡滚动条的 CSS 修复方案
做 ElementUI 开发的时候,有个坑挺容易踩到的:表格启用了固定列功能后,底部的横向滚动条会被固定区域盖住,导致用户点不到也拖不动。
这问题其实很常见,原因很简单。ElementUI 内部对固定列容器的高度计算比较死板,默认样式里 .el-table__fixed 往往直接撑满到底部,把原本留给滚动条的空间给占了。
解决方案
不用改组件源码,也不用引入新库,直接在项目的全局样式文件里加一段 CSS 覆盖规则就能搞定。核心思路是强制调整固定列容器的高度,让它不再完全占据底部空间。
.el-table .el-table__fixed {
height: auto !important;
bottom: 16px !important;
}
原理解析
这段代码主要做了两件事:
height: auto !important:解除固定列容器的高度限制,让它根据内容自适应,避免硬性撑开到底部。bottom: 16px !important:手动给底部留出空间,这个数值通常对应滚动条的高度,确保滚动条能露出来不被遮挡。
加上 !important 是因为 ElementUI 的样式优先级较高,普通 CSS 规则可能被覆盖。如果项目中有多个表格实例,建议确认选择器是否足够精确,必要时可以配合父级 class 进行限定。
这样调整后,表格既能保持固定列的功能,又能正常显示横向滚动条,交互体验就顺畅多了。遇到类似 UI 层级冲突的问题时,这种通过样式微调来解决的方法通常是最轻量且有效的。

