index.wxml

    
        
            XX
            首行1
            首行2
            首行3
            首行4
        
    
  <view class="table">
    <view class="thead">
        <view class="tr">
            <view class="th">XX</view>
            <view class="th">首行1</view>
            <view class="th">首行2</view>
            <view class="th">首行3</view>
            <view class="th">首行4</view>
        </view>
    </view>
    <view class="tbody">
        <view class="box">
            <view class="tr">
                <view class="td">哇哦1</view>
                <view class="td">哇哦2</view>
                <view class="td">哇哦3</view>
                <view class="td">哇哦4</view>
                <view class="td">哇哦5</view>
            </view>
            <view class="tr">
                <view class="td">哇哦131412314123523123</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦哇哦哇哦哇哦哇哦</view>
                <view class="td">哇哦哇哦</view>
                <view class="td">哇哦哇哦</view>
            </view>
            <block wx:for="{{22}}">
                <view class="tr">
                    <view class="td">哇哦哇哦</view>
                    <view class="td">哇哦</view>
                    <view class="td">哇哦</view>
                    <view class="td">哇哦</view>
                    <view class="td">哇哦</view>
                </view>
            </block>
            
            <view class="tr last">
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
            </view>
        </view>
    </view>
</view>

index.wxss

.table {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background-color: #eee;
  overflow: auto;
}

.thead {
  z-index: 2;
  display: flex;
  flex-direction: row;
  position: sticky;
  top: 0;
}

.tbody {
  z-index: 1;
  display: flex;
  flex-direction: row;
}

.tr {
  display: flex;
  flex-direction: row;
}

.td, .th {
  width: 100px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  box-sizing: border-box;
  /* 超出长度显示 ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td:first-child, .th:first-child {
  /* 设置首列200 ,设置th才有效*/
  /* width: 200px; */
  border-left: 1px solid black;
}

/* 如果border collapse,滚动会跟着动，所以单独给每个元素设置border */
.td:last-child, .th:last-child {
  border-right: 1px solid black;
}

.last .td {
  /* 最后一行底部border */
  border-bottom: 1px solid black;
}

.thead .tr .th {
  /* th设置粘性定位 */
  background-color: pink;
  position: sticky;
  top: 0;
  /* 顶部border */
  border-top: 1px solid black;
}

.td:first-child {
  /* td第一个粘性定位 */
  position: sticky;
  left: 0;
  background-color: skyblue;
}

.thead .tr .th:first-child {
  /* 第一个由于要保持上下和左右滚动都不被覆盖，设置在最上面 */
  z-index: 2;
  left: 0;

}