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 @   Vrapile  阅读(3273)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示