el-table表格下方多一条线的问题

本文解决了el-table在滚动时出现额外横线的问题。通过隐藏伪元素并重新设置下边框样式,确保滚动过程中边框始终正确显示。

问题重现

在el-table表格内容过多时滚动,表格下边框随着初始位置滚动问题,导致表格多出一条横线一条横线。

解决

  •  通过css可以看出伪元素::before就是这条多出来的横线,主要目的是作为el-table的下边框线。
  • 而el-table设置boeder属性后的自带下边框先被none了。
  • 所以在el-table表格内容过多时滚动,表格下边框随着初始位置滚动,导致表格内多出一条横线一条横线,而下边框线没有。
/* 隐藏伪元素 */
::v-deep.el-table::before {
  display: none!important;
}
/* 重现下自带下边框线 */
.el-table--border {
  border-bottom: 1px solid #fff!important;
}

删除伪元素后重新设置下边框就完成啦,这样滚动的时候下边框也会一直存在咯~

评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值