Element UI component Table removes the horizontal line at the bottom of the cell and sets the label background color

Sometimes directly modifying the component style does not take effect. We need to penetrate it and add a div outside first.

<div class="custom-table">
    <el-table>
    </el-table>
</div>

css： 

// 設置label的背景色
.custom-table ::v-deep .el-table th {
  background: var(--cool-gray-50, #F9FAFB);
  border-bottom: none; 
}

// 取消行之间的横向边框线
.custom-table ::v-deep .el-table td, .el-table th.is-leaf {
  border-bottom: none; 
}

//去掉最下面的那一条线
.custom-table ::v-deep .el-table::before {
  height: 0px;
}

original effect 

Effect after modification

Digression:

 Eye open icon: Eye fill · Bootstrap icon library (bootcss.com)

 Closed eye icon: Eye slash fill · Bootstrap icon library (bootcss.com)

and sometimes background color issues

Just set a transparent color in the corresponding component

<el-tag style="background-color: #0000;border-color: #0000;">
        <svg></svg>
</el-tag>