微信小程序 css样式自制表格

效果图

HTML部分

<view class="table">
        <view class="tr bg-w">
          <view class="th">头像</view>
          <view class="th">树名</view>
          <view class="th">植树时间</view>
          <view class="th">礼物数</view>
          <view class="th">总达成率</view>
        </view>
        <block v-for="(item, index) in listData" :key="index">
          <view class="tr bg-g" v-if="index % 2 == 0">
            <view class="td">{
   
   {item.txtp}}</view>
            <view class="td">{
   
   {item.treename}}</view>
            <view class="td">{
   
   {item.zssj}}</view>
            <view class="td">{
   
   {item.lws}}</view>
            <view class="td">{
   
   {item.zdcl}}</view>
          </view>
          <view class="tr" v-else>
            <view class="td">{
   
   {item.txtp}}</view>
            <view class="td">{
   
   {item.treename}}</view>
            <view class="td">{
   
   {item.zssj}}</view>
            <view class="td">{
   
   {item.lws}}</view>
            <view class="td">{
   
   {item.zdcl}}</view>
          </view>
        </block>
      </view>

Js部分

data () {
    return {
      listData: [
        {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
        {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
        {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
        {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'},
        {txtp: '01', treename: 'text1', zssj: 'type1', lws: '2', zdcl: 'type1'}
      ]
    }
  },

Css部分

<style>
.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 1rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 1rem;
  align-items: center;
}
</style>