ElementUI 表格固定列遮挡滚动条的 CSS 修复方案

ElementUI 表格固定列遮挡滚动条的 CSS 修复方案

做 ElementUI 开发的时候，有个坑挺容易踩到的：表格启用了固定列功能后，底部的横向滚动条会被固定区域盖住，导致用户点不到也拖不动。

这问题其实很常见，原因很简单。ElementUI 内部对固定列容器的高度计算比较死板，默认样式里 .el-table__fixed 往往直接撑满到底部，把原本留给滚动条的空间给占了。

解决方案

不用改组件源码，也不用引入新库，直接在项目的全局样式文件里加一段 CSS 覆盖规则就能搞定。核心思路是强制调整固定列容器的高度，让它不再完全占据底部空间。

.el-table .el-table__fixed {
  height: auto !important;
  bottom: 16px !important;
}

原理解析

这段代码主要做了两件事：

1. height: auto !important：解除固定列容器的高度限制，让它根据内容自适应，避免硬性撑开到底部。
2. bottom: 16px !important：手动给底部留出空间，这个数值通常对应滚动条的高度，确保滚动条能露出来不被遮挡。

加上 !important 是因为 ElementUI 的样式优先级较高，普通 CSS 规则可能被覆盖。如果项目中有多个表格实例，建议确认选择器是否足够精确，必要时可以配合父级 class 进行限定。

这样调整后，表格既能保持固定列的功能，又能正常显示横向滚动条，交互体验就顺畅多了。遇到类似 UI 层级冲突的问题时，这种通过样式微调来解决的方法通常是最轻量且有效的。