<think>我们注意到用户的
问题是关于去除
Element Plus中
el-table组件
底部的边框。根据引用[1]中提到的技巧，我们可以通过设置CSS变量`
--el-table-border
-color`为透明来去除边框。另外，引用[3]中提到了使用深度选择器来修改表格样式的方法，但这里我们只需要去除
底部边框。
实际上，
el-table的
底部边框是由表格的边框线组成的。默认情况下，
el-table有水平方向的边框（包括
底部边框）和垂直方向的边框。如果我们只想去除
底部边框，我们可以通过以下两种方式之一：
方法1（全局去除边框）：
使用`
--el-table-border
-color`设置为透明，这样整个表格的边框都会消失，包括
底部边框。
方法2（精确去除
底部边框）：
通过CSS样式，只针对
底部边框进行隐藏。
但是，用户特别指出引用[1]中的方法，即设置`
--el-table-border
-color: transparent`，这可以去除所有边框。如果用户只想去除
底部边框，我们可以结合CSS选择器来实现。
然而，根据用户的
问题描述，他可能希望去除的是整个表格
底部的边框线（即表格最下面一行的下边框）。注意，
el-table默认情况下可能没有单独的
底部边框，而是每一行都有边框。所以我们需要考虑是去除整个表格的
底部边框还是每一行的
底部边框。
根据
Element Plus的默认样式，表格的边框是通过每个单元格的边框实现的，所以
底部边框实际上是最后一行每个单元格的下边框。
因此，我们可以有以下方案：
方案一：使用
Element Plus提供的属性
我们可以使用
el-table的`border`属性来控制是否显示边框。将`:border="false"`可以去除所有边框，但这样会同时去除所有边框，而不仅仅是
底部。
方案二：使用CSS样式
我们可以通过CSS来覆盖默认样式，只去除最后一行单元格的下边框。
但是，用户的
问题中引用[1]提供了一种简单的方法：通过设置内联样式`style="
--el-table-border
-color: transparent"`来使边框透明。这样整个表格的边框都会消失，包括
底部边框。如果用户希望只去除
底部边框，那么我们可以使用更精确的CSS选择器。
具体实现：
1
. 去除整个表格的所有边框（包括
底部边框）：
```html
<
el-table :data="
tableData" style="
--el-table-border
-color: transparent">
<!
-- 列定义
-->
</
el-table>
```
2
. 只去除
底部边框（即最后一行单元格的下边框）：
```html
<
el-table :data="
tableData" class="no
-bottom
-border">
<!
-- 列定义
-->
</
el-table>
```
```css
/* 注意：如果使用了scoped，需要使用深度选择器 */
.no
-bottom
-border
.el-table__row:last
-child td {
border
-bottom: none;
}
/* 或者使用 */
.no
-bottom
-border
.el-table__inner
-wrapper::after {
display: none;
}
```
但是，注意引用[3]中提到，修改样式后可能会出现右侧白色竖线的
问题，这是因为表格的宽度计算
问题。如果遇到这个
问题，可以按照引用[3]的方法设置表格头和表格体的宽度为100%：
```css
:deep(
.no
-bottom
-border)
.el-table__header {
width: 100% !important;
}
:deep(
.no
-bottom
-border)
.el-table__body {
width: 100% !important;
}
```
然而，根据
Element Plus的版本，样式可能会有所不同。在较新的版本中，表格
底部边框可能是通过伪元素绘制的，所以我们可以通过隐藏伪元素来去除
底部边框：
```css
.no
-bottom
-border
.el-table::after {
display: none;
}
```
实际上，在
Element Plus中，表格的
底部有一条
横线是由一个伪元素`
.el-table::after`绘制的（位于表格的
底部）。所以去除这个伪元素即可去除整个表格的
底部边框线。
因此，推荐使用：
```css
.no
-bottom
-border::after {
display: none !important;
}
```
但是注意，这个伪元素是在表格容器上的，所以我们需要在
el-table组件上添加自定义类，然后通过深度选择器来修改（如果使用了scoped）。
综合以上，我们给出两种方案：
方案A：去除整个表格的所有边框（简单快速，但会同时去除所有边框）
```html
<
el-table :data="
tableData" style="
--el-table-border
-color: transparent">
<!
-- 列定义
-->
</
el-table>
```
方案B：只去除整个表格的
底部边框（保留其他边框）
```html
<
el-table :data="
tableData" class="no
-bottom
-border
-table">
<!
-- 列定义
-->
</
el-table>
```
```css
/* 全局样式或非scoped样式 */
.no
-bottom
-border
-table::after {
display: none;
}
/* 如果使用scoped，需要深度穿透 */
/* 注意：
Vue3中可以使用:deep() */
<style scoped>
:deep(
.no
-bottom
-border
-table::after) {
display: none;
}
</style>
```
方案C：只去除最后一行单元格的
底部边框（这样每一行的边框仍然存在，但最后一行没有下边框）
```html
<
el-table :data="
tableData" class="no
-last
-row
-border">
<!
-- 列定义
-->
</
el-table>
```
```css
/* 全局样式或非scoped样式 */
.no
-last
-row
-border
.el-table__row:last
-child td {
border
-bottom: none;
}
/* 如果使用scoped */
<style scoped>
:deep(
.no
-last
-row
-border
.el-table__row:last
-child td) {
border
-bottom: none;
}
</style>
```
用户可以根据自己的需求选择方案。
另外，引用[2]中提到，在flex布局中，
el-table的宽度可能会不断变化，这可能会导致边框显示异常。如果遇到类似
问题，需要检查布局，避免flex:1导致的宽度计算
问题。
最后，我们生成相关
问题：
§§相关
问题§§
1
. Element Plus中如何自定义表格的边框样式？
2
. 如何去除
el-table中某一列的右边框？
3
. el-table在flex布局下宽度异常怎么办？
4
. 如何修改
Element Plus表格行的悬停背景色？
5
. 如何设置
el-table表头与表格体的分隔线？</think>要移除
Element Plus 中 `
el-table` 组件的
底部边框，可以通过以下方法实现：
### 方法 1：使用 CSS 变量（推荐）
```html
<
el-table :data="
tableData" style="
--el-table-border
-color: transparent">
<!
-- 表格列定义
-->
</
el-table>
```
**原理**：
通过设置 CSS 变量 `
--el-table-border
-color` 为透明，直接移除所有表格边框线[^1]。
---
### 方法 2：深度选择器覆盖样式
```css
/* 在全局样式或带 scoped 的组件样式中 */
:deep(
.el-table) {
--el-table-border
-color: transparent; /* 移除所有边框 */
/* 单独移除
底部边框 */
&::after,
&__inner
-wrapper::after {
display: none !important;
}
}
```
---
### 方法 3：精确移除
底部边框
```css
/* 只移除
底部边框（保留其他边框） */
:deep(
.el-table) {
&::after {
display: none !important; /* 移除表格
底部伪元素边框 */
}
.el-table__row:last
-child td {
border
-bottom: none !important; /* 移除最后一行
底部边框 */
}
}
```
---
### 注意事项
1
. **布局
问题**：
在 flex 布局中使用时，需确保父容器设置具体宽度，避免出现引用[2]中的宽度异常
问题：
```html
<div style="display: flex">
<div style="width: 200px">侧边栏</div>
<div style="flex: 1; width: 0"> <!
-- 关键：width:0 修复 flex 渲染
问题 -->
<
el-table>
...</
el-table>
</div>
</div>
```
2
. **边框残留
问题**：
如出现引用[3]中的白色竖线残留，添加：
```css
:deep(
.el-table__header),
:deep(
.el-table__body) {
width: 100% !important; /* 修复宽度计算导致的残留边框 */
}
```
3
. **固定列处理**：
若使用固定列，需同步修改固定列样式：
```css
:deep(
.el-table__fixed)::before {
display: none !important; /* 移除固定列
底部边框 */
}
```
---
### 效果对比
| 默认样式 | 移除
底部边框后 |
|
----------|
----------------|
|  |  |
> 通过以上方法可灵活控制边框显示范围，推荐优先使用 CSS 变量方案[^1]。
分享了如何通过CSS解决在使用Element UI的el-table时，底部透明背景下出现的白色边框问题，提供了一个针对性的`:deep()`选择器修复方法。
扫一扫
2024
到【灌水乐园】发言
