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;
}

 

posted @ 2022-10-28 11:51  Vrapile  阅读(2715)  评论(0编辑  收藏  举报