el-table表头固定同时去掉竖向滚动条
时间: 2025-07-31 09:52:50 AIGC 浏览: 23
### 实现固定表头并去掉竖向滚动条
在使用 Element UI 的 `el-table` 组件时,若希望实现表头固定但同时去掉竖向滚动条,可以通过以下方式实现。
为实现表头固定效果,需要通过 CSS 样式对 `.el-table__header-wrapper` 设置 `position: sticky` 和 `top` 值。例如:
```css
.scroll-tab .el-table__header-wrapper {
position: sticky;
top: 0;
z-index: 10;
}
```
同时,为了去掉竖向滚动条,需要确保 `.el-table` 的高度不受限制,并且 `.el-table__body-wrapper` 的 `overflow` 属性设置为 `visible` 或直接移除。例如:
```css
.el-table.scroll-tab {
overflow: hidden;
height: auto;
}
.scroll-tab .el-table__body-wrapper {
height: auto;
overflow: visible;
}
```
上述设置可以确保表格内容在竖直方向上自由扩展,而不会出现滚动条。需要注意的是,表格内容的高度应与容器高度相匹配,以避免布局溢出或不完整显示的问题。
通过以上方式,可以实现固定表头并去掉竖向滚动条的需求,同时保持表格内容的完整展示 [^1]。
### 示例代码
以下是一个完整的实现示例:
```html
<template>
<el-table :data="tableData" border class="scroll-tab">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<style>
.scroll-tab .el-table__header-wrapper {
position: sticky;
top: 0;
z-index: 10;
}
.el-table.scroll-tab {
overflow: hidden;
height: auto;
}
.scroll-tab .el-table__body-wrapper {
height: auto;
overflow: visible;
}
</style>
```
### 注意事项
- 表格内容的高度需与容器高度匹配,避免内容溢出或布局混乱。
- 如果表格数据量较大,去掉竖向滚动条可能导致页面整体滚动,需结合具体场景调整布局。
阅读全文
相关推荐



















