微信小程序实现表格展示

开发中遇到商品详情页需要展示参数列表，App中我们可以使用table轻松实现列表功能，但是小程序却不支持这个元素，该怎么办呢？我们就用样式来实现：

思路：

先给整个大表格设置border-top；给大表格的直接子元素设置border-left、border-right、border-bottom；每行的参数名和参数值之间的竖线，我们通过给大表格的直接子元素设置伪元素实现；

代码：

  <!-- 商品参数 -->
  <view wx:for="{{product.parameterValues}}" class='param'>
    <!-- 参数标题 -->
    <view class='param-text'>{{item.group}}</view>
    <!-- 参数列表 -->
    <view class='param-table'>
      <view class='tb'>
        <view class="tb-box" wx:for="{{item.entries}}">
          <view class='tL'>{{item.name}}</view>
          <view class='tR'>{{item.value}}</view>
        </view>
      </view>
    </view>
  </view>

/*表格  */
.tb-box{
  border-bottom: 2rpx solid #f0f0f0;
  border-left: 2rpx solid #f0f0f0;
  border-right: 2rpx solid #f0f0f0;
}

/* 伪元素 */
.tb-box::after{
  content: '';
  width:2rpx;
  height: 100%;
  background: #f0f0f0;
  position: absolute;
  left: 30%;
  top: 0;
}

.tb {
  border-top: 2rpx solid #f0f0f0;
  position: relative;
}

.tL, .tR {
  font-size: 25rpx;
  display: inline-block;
  box-sizing: border-box;
  padding: 17rpx 30rpx;
  vertical-align: top;
}

.tL {
  width: 30%;
  color: #262626;
}

.tR {
  width: 69%;
  color: #262626;
}