el-table边框颜色修改—骨灰级

一、前言说明

　　1. 网上很多都是通过上下左右边框方式，如：　　

.el-table {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  margin: 0 auto;
}
::v-deep.el-table th {
  border: 1px solid black !important;
  border-right: none !important;
  border-bottom: none !important;
}
::v-deep.el-table td {
  border: 1px solid black;
  border-right: none !important;
}

　　原图查看效果： 

 　　浏览器放大后： 

　　存在问题：

　　（1）看上去总有白边，放大可以看到有两个boder挨在一起

　　（2）当存在合并单元格时候，合并单元格的边框不显示

　　（3）表格width:100%时，右边边框不显示

 

　　2. 网上另一种改动是通过 :cell-style="tableCellStyle" :header-cell-style="tableHeaderCellStyle"

　　原图查看效果：

 　　浏览器放大后：

  　　存在问题：

　　（1）外边框颜色未变，与内容间依然有白边

　　（2）不便于做全局通用样式

 

　　3. 因此，博主最终有效改动如下：

::v-deep .el-table th {
  border-color: rgb(152, 151, 151) !important;
}
::v-deep .el-table td {
  border-color: rgb(198, 196, 196) !important;
}
::v-deep .el-table--group, 
::v-deep .el-table--border {
  border: 0.1px solid rgb(152, 151, 151) !important;
}