uni-table類似斑馬紋表格,但每行的每個單元格顏色不同的實現方法
阿新 • • 發佈:2021-09-15
在專案開發中,要做類似的表格效果,如圖:
實現方法:
//奇數行 //奇數行第一個單元格 .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; }
效果: