微信小程序表格(列宽自适应,可横向翻滚)

一.wxml代码

  
   {{item.value}}
  
  
   {{item.value}}
  
  
   {{item.value}}
  
  
   {{item.value}}
  
  
   {{item.value}}
  
 

二.wxss代码

.table {
 font-size: 24rpx;
 margin-top: 50rpx;
 border: 1rpx solid #dadada;
 white-space:nowrap;
 display:flex;
}
.tr {
 width: 100%;
 justify-content: space-between;
}
.td {
 padding: 10rpx;
 border-bottom: 1rpx solid #dadada;
 border-right: 1rpx solid #dadada;
 text-align: center;
 height:40px;
 display:inline-block;
 align-items:center;
 font-size:12px;
}

三.js代码

Page({
  data: {
    sizeList: [],
    array: [{
      value: '212121221'
    },
    {
      value: '1221'
    },
    {
      value: '2121221'
    },
    {
      value: '21'
    },
    {
      value: '21221'
    },
    {
      value: '21221'
    },
    {
      value: '2'
    }, 
    {
      value: '21'
    },
    {
        value: '2121212222222221'
    },
    {
      value: '2121'
    }]
  },
  onLoad: function(options){
    let array = this.data.array
    for (let i = 0; i < array.length;i++){
      let size = array[i].length;
      this.data.sizeList.push(size)
    }
  }
})

四.测试

┭┮﹏┭┮，累死了，遇到好多坑，写了一晚上终于写出来了，成功！！！O(∩_∩)O！！！

测试图1.png

测试图1.png