去除table表格边框 、steps步骤条为虚线

// 去除表格单元格边框--上边框
.frame-table th{
 border:none;
  }
.frame-table td,.frame-table th.is-leaf {
 border:none;
}
// 去除表格最外层边框-底部边框 
.el-table--border::after, .el-table--group::after{
  width: 0;
} 
.frame-table::before{
 width: 0;
}
.frame-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
} 

 

 .el-step.is-horizontal .el-step__line{
 border-top: 2px dashed #CCD1DE;
 height: 0;
 background-color: transparent;
}

### 如何在Element UI `el-table` 中去掉表头前后边框线 为了有效去除 Element UI 表格组件 (`el-table`) 表头的前后边框线,可以采取调整 CSS 样式的策略。由于即使未显式设置边框属性,在默认情况下 `<el-table>` 组件仍可能因框架内部样式或浏览器默认行为而展示边框效果[^1]。 #### 方法一:覆盖默认样式 通过自定义CSS来重写 `.el-table th.is-leaf` 和 `.el-table td` 类的选择器,移除其边框: ```css .el-table th.is-leaf, .el-table td { border-bottom: none; } /* 去掉右边框 */ .el-table::before{ content:none; } ``` 此方法适用于全局应用到所有表格实例上。如果仅需应用于特定表格,则应增加更具体的选择器前缀以确保样式的特异性。 #### 方法二:使用内联样式或 scoped 样式 (针对单个页面/组件) 对于Vue单文件组件(SFC),推荐利用scoped样式防止污染其他部分的同时实现相同的效果: ```vue <template> <div class="custom-table"> <!-- Your el-table component here --> </div> </template> <style scoped> .custom-table >>> .el-table th.is-leaf, .custom-table >>> .el-table td { border-right: none !important; border-left: none !important; } .custom-table >>> .el-table::before { content: none!important; } </style> ``` 注意上述代码中的 `>>>` 是用于穿透作用域链的关键字,使得子元素能够被当前组件内的样式所影响;而在某些版本的 Vue CLI 工具中可能会采用 `/deep/` 或者不加任何修饰符直接编写即可生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值