在php中插入表格,如何在小程序中插入表格

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

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

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

table.wxml

head1

head2

head3

{{item.code}}

{{item.text}}

{{item.type}}

{{item.code}}

{{item.text}}

{{item.type}}

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.jsPage({

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('onLoad')

}

})

效果图如下