在項目開發中,要做類似的表格效果,如圖:
實現方法:
//奇數行 //奇數行第一個單元格 .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; }
效果: