el-table的样式修改
修改头部样式:
.el-table .el-table__header-wrapper tr th{ background-color: rgb(18, 47, 92)!important; color: rgb(255, 255, 255); }
修改每行样式:
.el-table .el-table__row{ background-color: rgb(18, 47, 92); color: rgb(255, 255, 255); }
当然,使用 header-cell-style 和 row-style 也是可以的
鼠标hover每行的样式:
.el-table .el-table__body tr.current-row > td { background-color: #0D1F34 !important; } .el-table .el-table__body tr:hover > td { background-color: #0D1F34 !important; }
修改表格每行边框的样式:
.el-table td, .el-table th.is-leaf{ border-bottom: 1px solid #4e73ac; border-right:1px solid #4e73ac; }
设置表格每行的高度:
.el-table__header tr, .el-table__header th{ height: 40px; padding: 0; } .el-table__body tr, .el-table__body td{ height: 40px; padding: 0; }
设置表格边框颜色:
.el-table{ border: 1px solid #4e73ac; }
再添加:
.el-table--border::after, .el-table--group::after{ width: 0; } .el-table::before{ height: 0; }
如果 表格右边框要比左边框宽,下边框要比上边框高
最后修改一下el-table的样式:
.el-table{ border-top: 1px solid #4e73ac; border-left: 1px solid #4e73ac; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)