1. 程式人生 > 其它 >uni-table類似斑馬紋表格,但每行的每個單元格顏色不同的實現方法

uni-table類似斑馬紋表格,但每行的每個單元格顏色不同的實現方法

在專案開發中,要做類似的表格效果,如圖:

實現方法:

//奇數行
    //奇數行第一個單元格
    .uni-table .uni-table-tr:nth-child(odd) :first-child {
        background-color: #F7F7F7;
    }

    //奇數行第二個單元格
    .uni-table .uni-table-tr:nth-child(odd) :nth-child(2) {
        background-color: #EBF4FF;
    }

    //奇數行第三個單元格
    .uni-table .uni-table-tr:nth-child(odd) :nth-child(3) 
{ background-color: #E0EEFD; } //奇數行第四個單元格 .uni-table .uni-table-tr:nth-child(odd) :last-child { background-color: #FEEBD2; } //偶數行 //偶數行第一個單元格 .uni-table .uni-table-tr:nth-child(even) :first-child { background-color: #FFFFFF; } //偶數行第二個單元格 .uni-table .uni-table-tr:nth-child(even) :nth-child(2)
{ background-color: #F5F8FF; } //偶數行第三個單元格 .uni-table .uni-table-tr:nth-child(even) :nth-child(3) { background-color: #EEF6FF; } //偶數行第四個單元格 .uni-table .uni-table-tr:nth-child(even) :last-child { background-color: #FFF4E8; }

效果: