element-ui table 表格头多出一列

最新推荐文章于 2025-06-04 17:08:11 发布

原创最新推荐文章于 2025-06-04 17:08:11 发布 · 8.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #css #scss

element-ui 同时被 2 个专栏收录

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

在Vue项目中遇到el-table组件的表头右侧出现了额外的空白列，原因是所有列都设置了固定宽度，当内容过多出现滚动条时，导致表头多出一列滚动条的占位。解决方法包括两种：一是通过CSS隐藏th.gutter，二是将th.gutter元素移动到滚动条上方，使其不占据可视区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：el-table 组件表头右侧多出一列空白

原因：

所有 el-table-column 都设了宽度，当内容超出高度滚动条出现，表头多出一列滚动条上方的占位

解决：

将 th.gutter 隐藏或将 th.gutter 移动到滚动条上方

/* 隐藏 */
th.gutter {
  display: initial;
}

/* 移动 */
th.gutter {
  background-color: #f1f1f1;
  position: absolute;
  height: 100%;
  right: 0;
}

/* vue 使用 scoped 需要 /deep/ 深度作用 */
div /deep/ th.gutter {
  display: initial;
}