vue 移动端table表格 固定首列和首行（简单粗暴）

效果图，不会做gif。。。只有静态预览： 上下滑动的时候固定了顶部，并且往左滑的时候冻结了第一列。

代码 ：  主要原理就是用 position: sticky;这个属性，粘在top==0px的时候.

<template>
  <div class="report_detail">
 
    <table>
        <thead>
            <tr>
                <th v-for="(n,i) of 50">字段 {{i+1}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(n,i) of 100">
                <td v-for="(m,j) of 50">{{j+1}}</td>
            </tr>
        </tbody>
    </table>
 
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      title:'',  
      isLoading: null,
      testInfo: {}
    };
  },
  mounted() {
  
    
  },
  methods: {
 
  
  }
};
</script>
 
 
 
<style lang="scss" scoped>
.report_detail {
 
   table{
        border-collapse: collapse;
        th,td{
          padding: 5px;text-align: center;min-width: 100px;
          font-size: 12px;
          line-height: 17px;
          text-align: center;
          padding: 9px 14px 8px;
          border-top: 1px solid #e5e5e5;
          border-right: 1px solid #e5e5e5;
        }
        th{
          background-color: #eaf2fc;position: sticky;top:0px;
        }
        td{
          background-color: #fff;
        }
 
        td:first-child{background-color: #fff;position: sticky;left:0px;}
        th:first-child{position: sticky;left:0px;z-index: 666;}
   }
       
 
}
</style>