table固定表头，内容超出滚动且滚动条在外部的案例

一般采用双table写法，thead一个table,tbody一个table，直接上代码

<template lang='pug'>
// thData表头数据
// 下方数据格式根据具体需求改动，这边为了方便写的
.table-content
    table(:style='{width:`${thData.length * 80}px`}')
        colgroup
            col(v-for='(col, index) in thData' :key='index' width='80')
        tr
            th(v-for='(thItem,index) in thData' :key='index'>
                span {{thItem.name}}
    table.tbody-table(:style='{width:`${thData.length * 80 + 25}px`}')
        colgroup
            col(v-for='(col, index) in thData' :key='index' width='80')
        tbody
            tr(v-for='(item,index) in tbody.row' :key='index')
                td(v-for='(col,index2) in item' :key='index2')
                    span {{col}}
</template>

.table-content {
    table {
      table-layout: fixed;
    }
    .tbody-table {
      display: block;
      overflow-y: auto;
      height: 700px;
    }
    th,
    td {
      width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        width: 80px;
        line-height: 30px;
        height: 30px;
      }
    }
 }