修改element表格样式border带边框表格stripe带斑马纹表格前⾔：下⾯是官⽅⽂档的创建带边框表格（border） 和带斑马纹表格（stripe）⽅法，但颜⾊太淡不明显
<el-table  border  stripe"></el-table>
那么只能改⼀下它的默认样式了
⼀.在公共样式⽂件中引⼊：
/* ⿏标滑过⾼亮显⽰ */
.el-table tbody tr:hover>td { background-color:rgb(189, 189, 189)!important }
/* 表格线 */
.el-table--border, .el-table--group { border-color: rgb(209, 206, 206);}
.el-table--border:after, .el-table--group:after, .el-table:before { background-color:rgb(209, 206, 206);}
.el-table td, .el-table--border th,.el-table th.is-leaf { border-bottom-color: rgb(209, 206, 206);}
.el-table--border td, .el-table--border th { border-right-color:rgb(209, 206, 206);}
/*  斑马纹表格背景 */
.el-table--striped .el-table__body tr.el-table__row--striped td { background:rgb(228, 228, 228)}
⼆.可以根据下⾯⽅法，按照⾃⼰想要的样式修改：
修改表格头部背景
.el-table th{
background: red;
}
修改表格⾏背景
.el-table tr{
background:blue;
}
修改斑马线表格的背景
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: goldenrod;
}table设置内边框
修改⾏内线的颜⾊
.el-table td,.building-top .el-table th.is-leaf {
border-bottom:  1px solid goldenrod;
}
修改表格最底部边框颜⾊和⾼度
.el-table::before{
border-bottom:  1px solid blue;
height: 2px
}
修改表头字体颜⾊
.el-table thead {
color: #8EB7FA;
font-weight: 500;
}
修改表格内容字体颜⾊和字体⼤⼩
.el-table{
color: #6B81CE;
font-size: 14px;
}
修改表格⽆数据的时候背景，字体颜⾊
.el-table__empty-block{
background: #16603C;
}
.el-table__empty-text{
color: #blue
}
修改表格⿏标悬浮hover背景⾊
.el-table--enable-row-hover .el-table__body tr:hover>td {    background-color: blue;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。