Vue table固定两头内容滚动中间内容

 

<template>
  <div style="margin: 80px 20px;">
    <div>
      <div style="width: 100%;display: flex">
        <div style="overflow: auto; white-space: nowrap;">
          <table border="1" style=" text-align: center;">
            <thead>
            <tr>
              <th>one</th>
              <th>one</th>
              <th>one</th>
              <th>one</th>
              <th>one</th>
              <th>one</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>01-20</td>
              <td>01-20</td>
              <td>011</td>
              <td>01</td>
              <td>01</td>
              <td>01</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div style=" width:25%; overflow: auto; white-space: nowrap;">
          <table border="1" style=" text-align: center;">
            <thead>
            <tr>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo Po</th>
              <th>TWo Order </th>
              <th>TWo Item</th>
              <th>TWo Lot </th>
              <th>TWo Start </th>
              <th>TWo End </th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
              <th>TWo</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Two No</td>
              <td>Two Item No</td>
              <td>Two Code</td>
              <td>Two Po No</td>
              <td>Two Order No</td>
              <td>Two</td>
              <td>Two</td>
              <td>Two</td>
              <td>Two</td>
              <td>Two-07-20</td>
              <td>Two-07-20</td>
              <td>Two-A1</td>
              <td>Two</td>
              <td>Two.18</td>
              <td>Two</td>
              <td>Two</td>
              <td>Two</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div style=" width:25%; overflow: auto; white-space: nowrap;">
          <table border="1" style=" text-align: center;">
            <thead>
            <tr>
              <th>Three</th>
              <th>Three</th>
              <th>Three</th>
              <th>Three</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Three 22.18</td>
              <td>Three EA</td>
              <td>Three A05</td>
              <td>Three F1自制</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  components: {},
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background-color: #bee1eb;
}

::-webkit-scrollbar-thumb {
  background-color: #00aff0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9c3
}

::-webkit-scrollbar-thumb:active {
  background-color: #00aff0
}

</style>