Element UI ＜el-table＞去除外边框

明天要比今天更努力一点~

已于 2024-01-28 21:12:49 修改

阅读量3.6k

点赞数

分类专栏： element 文章标签： vue.js javascript 前端 elementui

于 2023-07-27 14:13:58 首次发布

本文链接：https://blog.csdn.net/qq_44280090/article/details/131958626

版权

element 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用 Element UI <el-table>時，总会自带外边框，写了好多css样式始终不能去除，最终发现是th与td所带的样式。

代码如下

el-table 加 class="customer-no-border-table"

<el-table
  :data="personnelList" 
  style="width: 100%"
  class="customer-no-border-table" 
  @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="55"></el-table-column>
    
</el-table>

CSS样式

/*去掉表格单元格边框*/
   .customer-no-border-table th{
     border:none;
   }
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none;
}
 /*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
     border: none;
   }
  /*头部边框*/
   .customer-no-border-table thead tr th.is-leaf{
     border: 0px solid #EBEEF5;
     border-right: none;
   }
.customer-no-border-table thead tr th:nth-last-of-type(2){
  border-right: 0px solid #EBEEF5;
}
 /*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
     width: 0;
   }
.customer-no-border-table::before{
  width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
.customer-no-border-table .el-table__header tr th{
  background: #fff;
  color: #333333 ;
  padding: 3px ;
  fontWeight: 550 ;
  height: 36px ;
  border: 0px;
  font-size: 15px;
}