微信小程序-表格形式如何布局？

微信小程序没有现成的table标签，该怎么布局呢？

<view class="my-grids">
      <block wx:for="{{grids}}" wx:key="*this">
          <view url="" class="my-grid" hover-class="my-grid_active">
              <view class="my-grid__label">{{item}}</view>
          </view>
      </block>
  </view>

.my-grids {border-top: 1rpx solid #d9d9d9;border-left: 1rpx solid #d9d9d9;overflow: hidden}
.my-grid {position: relative; display:inline-block; padding: 20px 10px;width: 25%;box-sizing: border-box;border-right: 1rpx solid #d9d9d9;border-bottom: 1rpx solid #d9d9d9}
.my-grid_active {background-color: #ececec}
.my-grid__icon {display: block;width: 28px;height: 28px;margin: 0 auto}
.my-grid__label {margin-top:5px;display: block;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden}

Page({
    data: {
        grids: [0, 1, 2, 3, 4, 5, 6, 7, 8,9,10,11,12,13,14,15]
    }
});

 

转载于:https://www.cnblogs.com/changxue/p/8435458.html