table表头
<el-table
v-loading="loading"
:data="browseList"
@selection-change="handleSelectionChange"
height="650"
max-height="800"
border
highlight-current-row
:header-cell-style="{background:'#000000'}"
:row-style="{height:1+'px'}"
:cell-style="{padding:'0px'}"
>
style样式
<style lang="scss" scoped>
/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
max-width: 200px;
}
//设置表头文字样式
::v-deep .el-table__header-wrapper {
thead {
th{
div{
font-weight: 100;
font-size: 20px;
}
}
}
}
//表格内容区域隔行换色表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
background-color: rgb(172, 204, 203);
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
background-color: rgb(255, 230, 192);
}
//表格tr间距
::v-deep .el-table__body {
border-collapse: separate !important;
border-spacing: 0 1px !important;
table-layout: auto !important;
}
::v-deep .el-table,.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
background-color: transparent;
}
//图片样式
.el-table::before{
background-color: transparent;
}
::v-deep .el-table__header tr,
::v-deep .el-table th, .el-table tr{
background-color:transparent;
}
//表头颜色字体控制
::v-deep .el-table th>.cell{
font-weight: 700;
color: #f3f2fa;
font-size: 19px;
}
//指定第列颜色
::v-deep .el-table tbody tr td div{
color: #ffb1c2;
}
//指定第某列颜色
/* ::v-deep .el-table tbody tr td:nth-child(-n+3) div{
color: #0dd121;
}*/
::v-deep .el-table tbody tr td div{
font-size: 15px;
}
//上下的间距
::v-deep .el-table__body {
border-collapse: separate !important;
border-spacing: 0 4px !important;
table-layout: auto !important;
tbody tr:nth-child(odd) {
background-color: #282827;
}
tbody tr:nth-child(even) td {
background-color: #3e3e3e;
}
}
::v-deep .el-table,.el-table__expanded-cell {
background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
background-color: transparent;
}
//绑定选中行的颜色变化
::v-deep .el-table__body tr.current-row>td {
color: #a457d1;
background: #f3f2fa !important;
}
//修改bug的样式
::v-deep .el-table__header tr,
::v-deep .el-table th, .el-table tr{
background-color:transparent;
}
</style>