本篇文章給大家分享的是有關怎么在微信小程序中繪制一個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

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

wxss

.tle{
border-top:1pxsolid#ebc450;
margin:20rpx0;
border-left:1pxsolid#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:1pxsolid#c9c9c9;
border-right:1pxsolid#c9c9c9;
}
.by-c{
background:snow;
}
.by-w{
background:#e6f3f9;
}
.a-y{
background:#ffecb5;
border-bottom:1pxsolid#edd079;
border-right:1pxsolid#edd079;
}
.dd{
width:40%;
border-bottom:1pxsolid#edd079;
border-right:1pxsolid#edd079;
justify-content:center;
background:#ffecb5;
color:#333;
display:flex;
height:90rpx;
align-items:center;
}

總結

以上是生活随笔為你收集整理的怎么在微信小程序中绘制一个table表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。