微信小程序绘制表格

表格的绘制

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: 20 rpx 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: 90 rpx;

line-height: 90 rpx;

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: 90 rpx;

align-items: center;

}