微信小程序表格布局

微信小程序wxml + wxss，对许多 HTML 标签和 CSS 属性不支持。不支持 table 标签，推荐使用 flex 布局。自然而然的想法：flex 嵌套，效果还不错，贴代码如下

1.wxml 

<view id="panel" class="flex-column">
  <view class="flex-cell flex-row">
    <text class="flex-cell flex-row">1</text>
    <text class="flex-cell flex-row">2</text>
    <text class="flex-cell flex-row">3</text>
    <text class="flex-cell flex-row">4</text>
  </view>
  <view class="flex-row flex-cell">
    <text class="flex-cell flex-row">1</text>
    <text class="flex-cell flex-row">2</text>
    <text class="flex-cell flex-row">3</text>
    <text class="flex-cell flex-row">4</text>
  </view>
  <view class="flex-row flex-cell">
    <text class="flex-cell flex-row">1</text>
    <text class="flex-cell flex-row">2</text>
    <text class="flex-cell flex-row">3</text>
    <text class="flex-cell flex-row">4</text>
  </view>
  <view class="flex-row flex-cell">
    <text class="flex-cell flex-row">1</text>
    <text class="flex-cell flex-row">2</text>
    <text class="flex-cell flex-row">3</text>
    <text class="flex-cell flex-row">4</text>
  </view>
  <view class="flex-row flex-cell">
    <text class="flex-cell flex-row">1</text>
    <text class="flex-cell flex-row">2</text>
    <text class="flex-cell flex-row">3</text>
    <text class="flex-cell flex-row">4</text>
  </view>
</view>

2.wxss文件

#panel{
  height:65vh;
  background:#fff;
}
#panel text{
  line-height: 13vh;
  border-right: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
}
.flex-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.flex-cell{
  flex: 1;
}

结果如下图片：