本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下：

表格的绘制

js

Page({data:{infeed:['"", "1周", "2周", "3周", "总计"],endwise1: "游泳",tb1:"0",tb2:"0",tb3:"0",tb4:"0",endwise2: "跑步",tc1:"0",tc2:"0",tc3:"0",tc4:"0",endwise3: "健身",td1:"0",td2:"0",td3:"0",td4:"0",}})

wxml

<view class="tle"> <view class="ae by-c"> <block wx:for="{{infeed}}" wx:key="*this"> <view class="dd">{{item}}</view> </block> </view> <block > <view class="ae by-w " > <view class="wc a-y">{{endwise1}}</view> <view class="wc">{{tb1}}</view> <view class="wc">{{tb2}}</view> <view class="wc">{{tb3}}</view> <view class="wc">{{tb4}}</view> </view> <view class="ae by-w" > <view class="wc a-y">{{endwise2}}</view> <view class="wc">{{tc1}}</view> <view class="wc">{{tc2}}</view> <view class="wc">{{tc3}}</view> <view class="wc">{{tc4}}</view> </view> <view class="ae by-w" > <view class="wc a-yellow">{{endwise3}}</view> <view class="wc">{{td1}}</view> <view class="wc">{{td2}}</view> <view class="wc">{{td3}}</view> <view class="wc">{{td4}}</view> </view> </block></view>

wxss

.tle { border-top: 1px solid #ebc450; margin: 20rpx 0; border-left: 1px solid #c9c9c9;}.ae { display: flex; width: 100%; justify-content: center; align-items: center; text-align: center;}.wc { width: 40%; justify-content: center; text-align: center; height: 90rpx; line-height: 90rpx; border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9;}.by-c{ background: snow;}.by-w { background: #e6f3f9;}.a-y { background: #ffecb5; border-bottom: 1px solid #edd079; border-right: 1px solid #edd079;}.dd { width: 40%; border-bottom: 1px solid #edd079; border-right: 1px solid #edd079; justify-content: center; background: #ffecb5; color: #333; display: flex; height: 90rpx; align-items: center;}

希望本文所述对大家微信小程序开发有所帮助。