Element UI 表格樣式自定義

前言：下面是官方文檔的創建帶邊框表格（border） 和帶斑馬紋表格（stripe）方法，但顏色太淡不明顯

<el-table border stripe"> </el-table> 

那么只能改一下它的默認樣式了

一.在公共樣式文件中引入：

  /* 鼠標滑過高亮顯示 */
.el-table tbody tr:hover>td { ">(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 { ">(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; } 

• 修改行內線的顏色

.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; }