修改头部样式:
.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; }
最终效果: