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; }
作者名称:Vrapile
联系方式:发送邮件Vrapile@163.com,另博客账号也是本人微信号。
版权声明:此文是博主业余爱好所写,文章或有错误与不足之处,欢迎留言指正建议、共同探讨!另此文为博主原创,未经博主同意不得转载,否则保留追究法律责任的权利。
分类:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端