SoFunction
Updated on 2025-04-12

How to remove the header of the element table

Properties for document promptsshow-header

 <el-table
            :data="tableData1"
            :span-method="arraySpanMethod"
            border
            :show-header="status"
              <el-table-column
              prop="lable"
              label=""
              width="180">
            </el-table-column>
           /el-table >

!!! The key point is: show-header dynamic control

Element-ui table removes all borders

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

/*Remove table cell border*/
   .customer-no-border-table th{
     border:none;
   }
.customer-no-border-table td,.customer-no-border-table -leaf {
  border:none;
}
 /*The outermost border of the table*/
.customer-no-border-table .el-table--border, .el-table--group{
     border: none;
   }
  /*Head border*/
   .customer-no-border-table thead tr -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;
}
 /*The outermost border of the table - the bottom border*/
.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;
}

This is the end of this article about the implementation method of removing the header of the element table. For more relevant element table contents, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!