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; }
效果: