如何在小程序中插入表格

我们可以在微信小程序视图容器view中通过flex布局实现表格样式。

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

table.wxml

 view >
table.wxss
.table {
 border: 0px solid darkgray;
.tr {
 display: flex;
 width: 100%;
 justify-content: center;
 height: 3rem;
 align-items: center;
.td {
 width:40%;
 justify-content: center;
 text-align: center;
.bg-w{
 background: snow;
.bg-g{
 background: #E6F3F9;
.th {
 width: 40%;
 justify-content: center;
 background: #3366FF;
 color: #fff;
 display: flex;
 height: 3rem;
 align-items: center;
}
table.js
Page({
 data: {
 listData:[
 { code : 01 , text : text1 , type : type1 },
 { code : 02 , text : text2 , type : type2 },
 { code : 03 , text : text3 , type : type3 },
 { code : 04 , text : text4 , type : type4 },
 { code : 05 , text : text5 , type : type5 },
 { code : 06 , text : text6 , type : type6 },
 { code : 07 , text : text7 , type : type7 }
 onLoad: function () {
 console.log( #39;onLoad #39;) 
})
效果图如下

推荐：《小程序开发教程》
以上就是如何在小程序中插入表格的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。