1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Test</title> 8 <style> 9 table{border-collapse: collapse;} 10 th,td{padding: 5px;text-align: center;border:1px solid #999;min-width: 100px;} 11 th{background-color: #333;color: #fff;position: sticky;top:0px;} 12 td:first-child{background-color: #333;color: #fff;position: sticky;left:0px;} 13 th:first-child{position: sticky;left:0px;} 14 </style> 15 <script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script> 16 <script> 17 document.addEventListener("DOMContentLoaded",function(){ 18 let t = new Vue({el:"#t"}); 19 }); 20 </script> 21 </head> 22 23 <body> 24 <table id="t"> 25 <thead> 26 <tr> 27 <th v-for="(n,i) of 50">字段 {{i+1}}</th> 28 </tr> 29 </thead> 30 <tbody> 31 <tr v-for="(n,i) of 100"> 32 <td v-for="(m,j) of 50">{{j+1}}</td> 33 </tr> 34 </tbody> 35 </table> 36 </body> 37 38 </html>
我也是从网上查来的。这个不仅仅只是可以固定首行首列，还可以固定更多的，只是看自己怎么封装