小程序“表格”如何让取到的数据在新的一行显示？

小程序表格遇到问题，萌新初学编程，很多地方还不是很懂。 表格想做到 这种效果

https://segmentfault.com/q/1010000044013724?_ea=310492407

无法完成。。

然后只能退而求其次，做成下面这种效果，不需要数据左右滚动，把剩下的信息，在每一行的下一行显示，或者换行显示

我的代码实现的效果如图：

我想实现的效果如图：

希望大佬可以帮助我解决这个困难~ 。感谢诸位大佬的付出~

我的wxml代码如下：

<ScrollView class="table" scroll-y bindscrolltolower="handleScrollToLower" style="overflow-x: hidden;">
  <View class="sticky-box" style="height:{{tableHeight}}rpx;">
    <View class="table__head" style="width:{{tableWidth}}rpx;">
      <View class="table__head__td" wx:for="{{dataAttribute}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem">
        <Text class="table__head__td__text">{{attrItem.title}}</Text>
      </View>
    </View>
    <View class="table__row" wx:for="{{data}}" wx:key="dataIndex" wx:for-index="dataIndex" wx:for-item="dataItem" style="width:{{tableWidth}}rpx;">
      <View class="table__row__item">
        <Text class="table__row__td" wx:for="{{dataAttribute}}" wx:key="dataIndex" wx:for-index="attrIndex" wx:for-item="attrItem" wx:if="{{attrItem.key !== '30018' && attrItem.key !== '3003Y'}}">{{dataItem[attrItem.key] || '-'}}</Text>
      </View>
      <View class="table__row__item">
        <Text class="table__row__remark">{{dataItem['30018']}}</Text>
      </View>
      <View class="table__row__item">
        <Text class="table__row__remark">{{dataItem['3003Y']}}</Text>
      </View>
    </View>
  </View>
</ScrollView>

JS代码如下：（API已经开放无限制请求，可以直接调试获取）

const { Tab } = require('../../assets/libs/zanui/index');
const app = getApp()

Page({
  data: {
    data: [],
    dataAttribute: [
      {
        title: '名称',
        key: "3000X"
      },
      {
        title: '今日价格',
        key: "onejg"
      },
      {
        title: '昨日价格',
        key: "twojg"
      },
      {
        title: '涨跌',
        key: "zd"
      }
    ],
    tableHeight: 0, // 初始值为0
    tableWidth: 200 * 4 + 60,
    regionOptions: [
      '华南进口气',
      '华东进口气',
      '华南',
      '福建',
      '沿江',
      '华东',
      '山东',
      '华北',
      '东北',
      '陕甘宁',
      '西北',
      '西南'
    ],
    regionValues: [
      '5657cc97dc4822eafbf118df',
      '5657cca4dc4822eafbf118e1',
      '5657ccaddc4822eafbf118e2',
      '5657ccb3dc4822eafbf118e3',
      '5657ccbadc4822eafbf118e4',
      '5657ccc2dc4822eafbf118e5',
      '5657ccc9dc4822eafbf118e7',
      '5657ccd0dc4822eafbf118e9',
      '5657ccd6dc4822eafbf118ea',
      '5657ccdddc4822eafbf118ec',
      '5657cce3dc4822eafbf118ed',
      '5657cceadc4822eafbf118ef'
    ],
    selectedRegionIndex: 0, // 设置默认选中"华南进口气"
    actionSheetHidden: true
  },
  onLoad: function () {
    const priceColumnId = this.data.regionValues[this.data.selectedRegionIndex];
    this.fetchData(priceColumnId);
  },
  fetchData: function (priceColumnId) {
    const apiUrl = 'http://121.37.242.181/api/demo/myapi2';

    wx.showLoading({
      title: '数据加载中...',
      mask: true
    });

    wx.request({
      url: apiUrl,
      data: {
        pricecolumnid: priceColumnId
      },
      success: (res) => {
        const { code, data } = res.data;

        if (code === 1 && data) {
          const parsedData = JSON.parse(data);
          const processedData = this.processData(parsedData);
          console.log(processedData);
          this.setData({
            data: processedData,
            tableHeight: (processedData.length + 1) * 96 // 计算表格高度
          });
        } else {
          wx.showToast({
            title: '数据加载失败',
            icon: 'none'
          });
        }
      },
      fail: (res) => {
        wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  },
  processData: function (data) {
    return data.map(item => {
      const newItem = { ...item };
      newItem.unit = item['30018'] || '-';
      newItem.remark = item['3003Y'] || '-';
      return newItem;
    });
    console.log(processedData); 
    return processedData;
  },
  openActionSheet: function () {
    this.setData({
      actionSheetHidden: false
    });
  },
  actionSheetChange: function () {
    this.setData({
      actionSheetHidden: true
    });
  },
  selectRegion: function (event) {
    const index = event.currentTarget.dataset.index;
    this.setData({
      selectedRegionIndex: index,
      actionSheetHidden: true
    });
    const priceColumnId = this.data.regionValues[index];
    this.fetchData(priceColumnId);
  }
});

我的css代码如下：

.page {
  font-size: 26rpx;
  line-height: 60rpx;
  color: #222;
}

.table {
  display: block;
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 100%;
}

.sticky-box {}

.table__head {
  height: 96rpx;
  white-space: nowrap;
  position: sticky;
  top: 0rpx;
  z-index: 100;
  height: 88rpx;
  font-size: 24rpx;
  line-height: 88rpx;
  color: #aaabbd;
  background-color: #f8f8f8;
  border-bottom: 2rpx solid #ecf1f8;
  background-color: #fff;
  white-space: nowrap;
  display: flex;
}

.table__head__td {
  width: 200rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  white-space: normal;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.table__head__td:nth-child(1) {
  padding-left: 24rpx;
  width: 260rpx;
  margin-right: 40rpx;
  position: sticky;
  z-index: 101;
  left: 0rpx;
}

.table__head__td__text {
  display: inline;
}

.table__row {
  position: relative;
  height: 96rpx;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2rpx solid #ecf1f8;
}

.table__row__td {
  overflow: visible;
  white-space: normal;
  width: 200rpx;
  display: inline-block;
  background-color: #f8f8f8;
  box-sizing: border-box;
  font-size: 26rpx;
  line-height: 30rpx;
  position: relative;
  overflow: visible;
  white-space: normal;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.table__row__td::after {
  content: "";
  white-space: pre;
}

.table__row__td:nth-child(1) {
  margin-right: 40rpx;
  padding-left: 24rpx;
  width: 260rpx;
  position: sticky;
  z-index: 10;
  left: 0;
}