必须要固定表头，但表格过宽要左右滑动，我现在做的这个表头和表格是分开滑动的，体验极差，怎么让它们同步滑动啊

wxml:

<view class="tableHeader">
  <view class="searchbar">
    <navigator url='/pages/search_worker/search_worker' class='search-navigator'></navigator>
  </view>
  <text class="title">职员信息表</text>
  <view class="divLine"></view>
  <scroll-view scroll-x="true">
    <view class="tr thColor">
      <view class="th">职工号</view>
      <view class="th">性别</view>
      <view class="th">姓名</view>
      <view class="th">年龄</view>
      <view class="th">科室号</view>
      <view class="th">联系电话</view>
    </view>
  </scroll-view>
</view>
<scroll-view scroll-x="true" scroll-y="true" style='height:{{tbodyHeight}}px'>
    <block wx:for="{{result}}" wx:key="id" >
      <view class="tr">
        <view class="td">{{item.id}}</view>
        <view class="td">{{item.sex}}</view>
        <view class="td">{{item.name}}</view>
        <view class="td">{{item.age}}</view>
        <view class="td">{{item.officeid}}</view>
        <view class="td">{{item.phonenumber}}</view>
      </view>
    </block>
</scroll-view>
<loadingmore hasmore="{{bool}}"></loadingmore>

js:

onShow: function () {
    var that = this;
    that.getInfo(1);
    setTimeout(function (){
    wx.getSystemInfo({
      success: (res) => {
        let windowHeight = res.windowHeight;
        console.log(windowHeight);
        const query = wx.createSelectorQuery().in(that)
        query.selectAll('.tableHeader').boundingClientRect((rects) => {
        let rect = rects[0];
        console.log(rect);
        let height = windowHeight - rect.height;
        that.setData({
          tbodyHeight: height.toFixed(0),
        })
        }).exec();
      }
    });
    },500)
  }