微信小程序--自定义表格：随笔

微信小程序项目需要用到表格所以自定义了一个【留着以后备用】，样式可以随自己喜爱自行修改

wxml代码

 <view class='history-table-wrap'>
   <view class="table">
      <view class="tr">
          <view class="th">收费项</view>
          <view class="th">费率</view>
          <view class="th">计费量</view>
           <view class="th">合计¥</view>
      </view>
      <view class="tr" wx:for="{{list}}" wx:key="index" wx:for-item="payItem">
          <view class="td black">{{payItem.FEENAME}}</view>
          <view class="td">{{payItem.FEERATE}}</view>
          <view class="td">{{payItem.QUANTITY}}</view>
          <view class="td red">{{payItem.FEETOTAL}}</view>
      </view>
    </view>
</view>

CSS样式

.history-table-wrap{
  margin-top: 60px;
  position: absolute;
  width: 668rpx;
  height: 500rpx;
  left: 50%;
  margin-left: -334rpx;
  top: 70rpx;
  overflow-y: scroll;
  overflow-x: hidden;
}
/* 表格代码   */
.table{
  border:1px solid #dadada;
  border-right:0;
  border-bottom: 0;
  width: 98%;
  margin-left: 1%;
}
.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: 800;
  background-color: #F9C0BF;
  font-size: 26rpx;
  color: #330e0e;
}
.td{
  font-size: 22rpx;
  color: #E97D67;
}

.black{
  color: #330e0e;
}

.red{
  color: #ED3D38;
}