(Element UI 组件 Table)去除单元格底部的横线

Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线。

这个底部横线其实是一个 border-bottom,不过对于表头使用了 th 元素,对于表数据使用了 td 元素,因此修改的时候需要兼顾两种元素。

如果你只是修改表数据的样式,而不修改表头,那只需修改 td 元素

修改方式:在 style 标签添加如下样式即可

//去掉表格内的线
table th,
table td {
  border-bottom: none !important;
}
//去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
posted @   捡破烂的小z  阅读(7629)  评论(1编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示