小程序中如何固定表头和首列

<scroll-view scroll-x onScroll="scrollX" scroll-left="{{scrollLeft}}">
  <view class="table__head" style="width:{{tableWidth}}rpx;">
    <view class="table__head__td" a:for="{{headList}}" a:key="attrIndex" a:for-index="attrIndex" a:for-item="attrItem">
      <text class="table__head__td__text">{{attrItem.title}}</text>
    </view>
  </view>
</scroll-view>
<scroll-view scroll-y onScroll="scrollY" class="table" bindscrolltolower="handleScrollToLower">
  <scroll-view scroll-x onScroll="scrollX">
    <view style="height:{{tableHeight}}rpx;">
      <!-- <view class="table__head" style="width:{{tableWidth}}rpx;">
        <view class="table__head__td" a:for="{{headList}}" a:key="attrIndex" a:for-index="attrIndex" a:for-item="attrItem">
          <text class="table__head__td__text">{{attrItem.title}}</text>
        </view>
      </view> -->
      <view class="table__row" a:for="{{200}}" a:key="dataIndex" a:for-index="dataIndex" a:for-item="dataItem" style="width:{{tableWidth}}rpx;">
        <text class="table__row__td" a:for="{{headList}}" a:key="dataIndex" a:for-index="attrIndex" a:for-item="attrItem">{{dataIndex}}</text>
      </view>
    </view>
  </scroll-view>
</scroll-view>

.table{
  display: block;
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 50vh;
}
.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: center;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.table__head__td:nth-child(1) {
  padding-left: 24rpx;
  width: 260rpx;
  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: scroll;
  white-space: nowrap;
  width: 200rpx;
  display: inline-block;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 26rpx;
  line-height: 96rpx;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-align: center;
}
.table__row__td:nth-child(1) {
  padding-left: 24rpx;
  width: 260rpx;
  position: sticky;
  z-index: 10;
  left: 0;
}

Page({
  data: {
    headList: [
      { title: '第一列' },
      { title: '第二列' },
      { title: '第三列' },
      { title: '第四列' },
      { title: '第五列' },
      { title: '第六列' },
    ],
    tableHeight: (200 + 1) * 96,
    tableWidth: 200 * 6 + 60,
  },
  scrollY(e) {
    this.setData({
      scrollTop: e.detail.scrollTop,
    });
  },
  scrollX(e) {
    this.setData({
      scrollLeft: e.detail.scrollLeft,
    });
  },
  onLoad() {
    my.setCanPullDown({
      canPullDown:false
    });
  },
})