手机端表格怎么做横向滑动， 滑动时不影响上方结构

因为手机屏幕比较窄，表格数据太长超出屏幕时，需要做左右滑动效果 ，但表格滑动时发现一个bug，就是滑动时顶上的导航栏也跟着滑动了， 原因是我的table表格 外面没有包一层 van-list， 加上就好了

    // 表格外面必须包一层van-list ， 不然表格左右滑动时 ，上方的页面也会跟着滑动

  <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <table :border="1" cellspacing="0" width="100%" id="tableId">
            <tr v-for="(item, index) in list" :key="index">
              <td class="name">{{ item.area }}</td>
              <td class="short">{{ item.shortName }}</td>
              <td>{{ item.customercount }}</td>
              <td>{{ item.visitedcustomercount }}</td>
              <td>{{ item.visitedrate }}</td>
              <td>{{ item.sfkhcountDr }}</td>
              <td>{{ item.sfkhcount }}</td>
              <td>{{ item.changerate }}</td>
              <td>{{ item.areasort }}</td>
            </tr>
          </table>
        </van-list>




// 引入发请求的api
import {getOrgBoard} from "@/api";


  created() {
    this.getData();
  },

  data() {
    return {
      list: [
        {
          area: "区域",
          shortName: "二级行",
          customercount: "商机总数",
          visitedcustomercount: "拜访数",
          visitedrate: "拜访率",
          sfkhcountDr: "单日开户数",
          sfkhcount: "总开户数",
          changerate: "转化率",
          areasort: "区域排名",
        },
      ],
      pageSize: 10,
      pageNo: 1,
      loading: true,
      finished: false,
      total: "",
    };
  },



    // 获取数据
    async getData() {
     const { data: res } = await getOrgBoard(  {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      });

   
      console.log(res);
      let rows = res.data.list;
      this.loading = false;
      this.total = res.data.count;
      if (rows == null || rows.length === 0) {
        // 加载结束
        this.loading = false;
        this.finished = true;
        return;
      }

      this.list = this.list.concat(rows);
      console.log(this.list);
   
      if (this.list.length >= this.total) {
        this.finished = true;
      }
    },


    onLoad() {
      this.pageNo += 1;
      this.getData();
    }







  /deep/ .van-list {
  //主要是这两行实现左右滑动
  overflow-x: scroll;
  overflow-y: hidden;
  }






 table {
  font-size: 0.37rem;
  border-color: #929292;
  border-collapse: collapse;
  white-space: nowrap;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
  .name {
   // 固定第一列左右滑动时不动
    background-color: #f3f3f3;
    position: sticky;
    z-index: 1;
    left: 0;
    padding: unset;
  }
  td {
    padding: 0.23rem;
  }
  tr:nth-child(1) {
    td:nth-child(1) {
      background-color: #d7d7d7;
    }
  }

  .short {
    // 固定第二列左右滑动时不动
    position: sticky;
    z-index: 1;
    left: 2.18rem;
    background-color: white;
    tr:nth-child(1) {
      background-color: #d7d7d7;
    }
  }

  tr:nth-child(1) {
    background-color: #d7d7d7;
    td:nth-child(2) {
      background-color: #d7d7d7;
    }
  }
}