table固定表头 上下左右滑动

<style lang="scss">
.my-table {
  font-size: 16px;
  // width: 1000px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
  margin-top: 50px;
  margin-left: 200px;
  text-align: center;
}
.first-table {
}
.top {
  overflow-x: auto;
  overflow-y: hidden;
}

.sec-table {
  overflow-y: auto;
  overflow-x: hidden;

  height: 200px;
  background: red;
}
</style>
<template>
  <div class="my-table" :style="{width:`${tableReallyWidth}px`}">
    <div class="top">
      <table cellspacing="0" cellpadding="0" border="0" class="first-table"
        :style="{width:`${tableWidth}px`}">
        <colgroup>
          <col v-for="(column, index) in columns" :key="index" :width="column.width">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(column, index) in columns" :key="index">
              {{ column.title || '' }}
            </th>
          </tr>
        </thead>
      </table>
      <div class="sec-table" :style="{width:`${tableWidth}px`}">
        <table cellspacing="0" cellpadding="0" border="0">
          <colgroup>
            <col v-for="(column, index) in columns" :key="index" :width="column.width">
          </colgroup>
          <tbody>
            <tr v-for="(entry,index) in tableData" :key="index">
              <td v-for="(column, index2) in columns" :key="index2">
                <span v-if="entry[column.key]">{{entry[column.key]}}</span>
                <span v-else><button>编辑</button></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "table",
  data() {
    return {
      tableWidth: 0,
      tableReallyWidth: 700,
      columns: [
        {
          title: "姓名",
          key: "name",
          width: 100
        },
        {
          title: "年龄",
          key: "age",
          width: 100
        },
        {
          title: "省份",
          key: "province",
          width: 100
        },
        {
          title: "市区",
          key: "city",
          width: 200
        },
        {
          title: "地址",
          key: "address",
          width: 200
        },
        {
          title: "邮编",
          key: "zip",
          width: 100
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 100
        }
      ],
      tableData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      Array.from(new Array(20)).forEach(item =>
        this.tableData.push({
          province: "上海",
          city: "上海市",
          name: "张三",
          zip: "62352",
          age: 689,
          address: "江杨北路222号"
        })
      );

      this.columns.forEach(item => {
        this.tableWidth += +item.width;
      });
    });
  }
};
</script>