<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
table{border-collapse: collapse;}
th,td{padding: 5px;text-align: center;border:1px solid #999;min-width: 100px;}
th{background-color: #333;color: #fff;position: sticky;top:0px;}
td:first-child{background-color: #333;color: #fff;position: sticky;left:0px;}
th:first-child{position: sticky;left:0px;}
</style>
<script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function(){
let t = new Vue({el:"#t"});
});
</script>
</head> <body>
<table id="t">
<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>
</body> </html>
我也是从网上查来的。这个不仅仅只是可以固定首行首列，还可以固定更多的，只是看自己怎么封装