微信小程序实现表格展示

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

思路：

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

代码：

  
  
    
    {{item.group}}
    
    
      
        
          {{item.name}}
          {{item.value}}
        
      
    
  

/*表格  */
.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;
}