怎么在微信小程序中绘制一个table表格

本篇文章给大家分享的是有关怎么在微信小程序中绘制一个table表格，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联是一家专注于网站设计、成都网站建设与策划设计,清徐网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:清徐等地区。清徐做网站价格咨询:18982081108

表格的绘制

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

  
  
   {{item}}
  
  
  
  
   {{endwise1}}
   {{tb1}}
   {{tb2}}
   {{tb3}}
   {{tb4}}
  
   
   {{endwise2}}
   {{tc1}}
   {{tc2}}
   {{tc3}}
   {{tc4}}
  
   
   {{endwise3}}
   {{td1}}
   {{td2}}
   {{td3}}
   {{td4}}
  
  

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;
}

以上就是怎么在微信小程序中绘制一个table表格，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。