vue 表格固定首行首列(纯css)

<template>
<div className="table_wrap">
    <table>
        <thead>
            <tr>
                <th v-for="(n,i) of 6" :key="i">表头{{i}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(n,i) of 100" :key="i">
                <td v-for="(m,j) of 6" :key="j">内容{{j}}</td>
            </tr>
        </tbody>

    </table>
</div>
</template>

<style lang="scss" scoped>
.table_wrap{
  width:100%;
  height: 80vh;
  overflow: auto;
  border-bottom:1px solid #61dafb;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse:separate;
  border-spacing:0;
  border:0;
}

td, th{
    width:150px;
    box-sizing: border-box;
    border-right:1px solid red;
    border-bottom:1px solid red;
    /*超出长度...*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

thead tr th {
    position:sticky;
    top:0;
    // background:#61dafb;
    background:pink;
}

th:first-child, td:first-child {
    position:sticky;
    left:0;
    background:#61dafb;
}
th:first-child {
    z-index:1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
    background:pink;
}

</style>

参考来源:
纯css实现table固定首行、首列
vue表格实现固定表头首列(使用了js)