小程序中使用表格功能

效果展示：

1、wxml代码

<view class="table">
        <view class="tr bg-w">
          <view class="th">Name</view>
          <view class="th">UT Target</view>
          <view class="th ">WTD</view>
          <view class="th ">MTD</view>
        </view>
        <block wx:for="{{listData}}" wx:key="index">
          <view class="tr {{index%2 === 0?'':'bg-g'}}">
            <view class="td">{{item.code}}</view>
            <view class="td">{{item.text}}</view>
            <view class="td">{{item.type}}</view>
            <view class="td">{{item.text}}</view>
            
          </view>
        </block>
      </view>

2、wxss代码

.table {
  margin: 11rpx 14rpx 0 14rpx;
 }
 .tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 72rpx;
  align-items: center;
  font-size: 22rpx;
  color: #666666;
 }
 .td {
  width:40%;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: #666666;
 }
 .bg-g{
  background: #F6F7F9;
 }
 .th {
  width: 40%;
  justify-content: center;
  background: #E9E9E9;
  color: #333333;
  display: flex;
  height: 72rpx;
  align-items: center;
  font-size: 22rpx;
 }

3、js代码

 listData: [{
        "code": "01",
        "text": "text1",
        "type": "type1",
        "YTD": "0.34"
      },
      {
        "code": "02",
        "text": "text2",
        "type": "type2",
        "YTD": "0.78"
      },
      {
        "code": "03",
        "text": "text3",
        "type": "type3",
        "YTD": "0.80"
      },
      {
        "code": "04",
        "text": "text4",
        "type": "type4",
        "YTD": "0.90"
      },
      {
        "code": "05",
        "text": "text5",
        "type": "type5",
        "YTD": "0.78"
      }
    ],