el-table除去边框
时间: 2025-02-12 07:18:28 浏览: 74
### 去除Element UI `el-table` 组件的边框样式
为了有效去除 Element UI 中 `el-table` 表格组件的边框,可以采用多种方法来覆盖默认样式。具体实现方式如下:
#### 方法一:全局 CSS 覆盖
通过自定义全局 CSS 来移除表格及其单元格之间的边界线。
```css
/* 移除顶部和底部边框 */
::v-deep .el-table--border th.el-table__cell,
::v-deep .el-table td.el-table__cell {
border-bottom: none !important;
}
/* 移除右侧边框 */
::v-deep .el-table--border .el-table__cell {
border-right: none !important;
}
/* 完全移除外层边框 */
::v-deep .el-table--border,
::v-deep .el-table--group {
border: none !important;
}
```
此段代码能够全面清除 `el-table` 的内部及外部边框[^2]。
#### 方法二:局部作用域内的样式调整
如果仅需针对特定页面或组件应用无边框效果,则可以在相应 Vue 单文件组件内使用 `<style scoped>` 标签,并配合深度选择器 (`::v-deep`) 实现相同的效果。
```html
<template>
<div class="no-border-table">
<!-- Table content here -->
</div>
</template>
<style lang="scss" scoped>
.no-border-table {
::v-deep .el-table--border th.el-table__cell,
::v-deep .el-table td.el-table__cell {
border-bottom: none !important;
}
::v-deep .el-table--border .el-table__cell {
border-right: none !important;
}
::v-deep .el-table--border,
::v-deep .el-table--group {
border: none !important;
}
}
</style>
```
这种方法有助于保持样式的封装性和可维护性。
#### 注意事项
即使已经按照上述方法设置了无边框样式,在某些情况下仍可能出现残留的下边框现象。这可能是由于其他未被覆盖的样式规则所致。此时建议检查是否有额外的应用于 `.el-table` 类的选择器存在冲突的情况。
阅读全文
相关推荐


















