微信小程序--表格制作

–js–

data:{
  msg:'数据'
}

–wxml–

<view class="container">
   <view class="table">
       <view class="tr">
         <view class="th">标题1</view>
         <view class="th">标题2</view>
         <view class="th">标题3</view>
         <view class="th">标题4</view>
         <view class="th">标题5</view>
       </view>
       <view class="tr" wx:for="{{5}}">
          <view class='td'> {{msg}} </view>
          <view class="td"> {{msg}} </view>
          <view class="td"> {{msg}} </view>
          <view class="td"> {{msg}} </view>
          <view class="td"> {{msg}} </view>
       </view>
    </view>
</view>

–wxss–

.table {

border: 5px solid rebeccapurple;
border-right: 0;
border-bottom: 0;
width: 98%;
}

.tr {
width: 100%;
display: flex;
justify-content: space-between;
}

.th, .td {
padding: 10px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width: 100%;
}

.th {
font-weight: 400;
background-color: #dadada;
}