啥先不说直接看效果吧
最开始是用Uview写的表格 但是发现属性太少了,首先就是不能取消横竖边框,最后就是没有办法改变每一行的背景颜色,他只有th-style改变表头的背景颜色
然后我选择用uni-ui的表格组件,发现他可以取消竖的边框 但是还是不能改变每一行的背景颜色,
使用deep穿透也不行,
最后采用view原生写法
<view class="table">
<view class="tr">
<view class="th">序号</view>
<view class="th">名称</view>
<view class="th">次数</view>
<view class="th">通过率</view>
</view>
<view class="tr" style="">
<view class="td">
<image src="../../static/slices/first.png" style="width: 89rpx;height: 61rpx; margin-left: -59rpx;margin-top: -8rpx; position: absolute;"></image>
</view>
<view class="td">张飒</view>
<view class="td">12</view>
<view class="td">100%</view>
</view>
<view class="tr">
<view class="td" >
<image src="../../static/slices/second.png" style="width: 89rpx;height: 61rpx; margin-left: -59rpx;margin-top: -8rpx;position: absolute;"></image>
</view>
<view class="td">李斯</view>
<view class="td">8</view>
<view class="td">100%</view>
</view>
<view class="tr">
<view class="td">
<image src="../../static/slices/third.png" style="width: 89rpx;height: 61rpx; margin-left: -59rpx;margin-top: -8rpx;position: absolute;"></image>
</view>
<view class="td">王武</view>
<view class="td">7</view>
<view class="td">100%</view>
</view>
<view class="tr">
<view class="td">4</view>
<view class="td">王二</view>
<view class="td">6</view>
<view class="td">100%</view>
</view>
<view class="tr">
<view class="td">5</view>
<view class="td">麻子</view>
<view class="td">3</view>
<view class="td">100%</view>
</view>
</view>
.table {
width: 100%;
border-radius: 8rpx;
display: table;
border: 1px solid #EFEFEF;
border-collapse: collapse;
font-size: 28rpx;
.th {
text-align: center;
color: #333333;
padding: 20rpx 0;
font-weight: bolder;
display: table-cell;
}
.td {
text-align: center;
padding: 20rpx 0;
display: table-cell;
}
.tr {
display: table-row;
}
}
.table .tr:nth-child(1){
background-color: #F4F4F4 ;
}
.table .tr:nth-child(2){
background: linear-gradient(270deg, #FFFFFF 0%, #FFF4E8 100%);
}
.table .tr:nth-child(3){
background: linear-gradient(270deg, #FFFFFF 0%, #E8F3FF 100%);
}
.table .tr:nth-child(4){
background: linear-gradient(270deg, #FFFFFF 0%, #FFEFF2 100%);
}