elementUI 表格隔行换色,修改table表头背景样式
要修改elementUI 的表格默认样式,需要有足够的耐心,在浏览器中寻找它自带的样式,然后在本地公共样式中覆盖。
在项目公共css文件中,添加如下代码。
表格隔行换色:
.el-table .el-table__body tr:nth-child(even) {
background-color: #031E40; /* 偶数行背景色 */
}
.el-table .el-table__body tr:nth-child(odd) {
background-color: #03102B; /* 奇数行背景色 */
}
.el-table .el-table__body tr:hover > td {
background-color: #000 !important; /* 鼠标移入行背景色 */
}
修改table表头背景样式:
可以修改表头颜色,也可以为其添加背景图。
注意:要为表头tr 添加背景图,需将th的背景初始为none。
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
tr{
background: url(../images/table-head-bg.png) no-repeat;
background-position: center;
background-size: cover;
}
th {
word-break: break-word;
background: none !important; // 将th的背景初始为none
border-bottom: none !important;
color: #fff;
height: 40px !important;
font-size: 13px;
}
}
修改所有输入框、下拉框,文本框的背景样式:
.el-form-item__content{
color: #eee;
.el-input__wrapper{
input{
color: #fff;
}
background-color: #031E40;
box-shadow:0px 0px 0px 1px #0680cb;
}
.el-select__wrapper{
background-color: #031E40;
box-shadow:0px 0px 0px 1px #0680cb;
span{
color: #fff;
background-color: #031E40 !important;
}
}
.el-textarea__inner{
background-color: #031E40;
box-shadow:0px 0px 0px 1px #0680cb;
color: #fff;
}
}