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

博客介绍了 Element UI 组件 Table 的 border 属性,添加该属性可增加纵向边框,但无法控制横线边框,即使简单的 el - table 也有底部横线。此横线是 border - bottom,修改时要兼顾表头 th 元素和表数据 td 元素,若只改表数据样式,修改 td 元素即可,在 style 标签添加样式就行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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


  1. //去掉表格内的线
  2. table th,
  3. table td {
  4. border-bottom: none !important;
  5. }
  6. //去掉最下面的那一条线
  7. .el-table::before {
  8. height: 0px;
  9. }
  10. .customer-table .el-table__fixed-right::before,
  11. .el-table__fixed::before {
  12. width: 0;
  13. }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值