zoukankan      html  css  js  c++  java
  • vue table 固定首列和首行

     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>

    我也是从网上查来的。这个不仅仅只是可以固定首行首列,还可以固定更多的,只是看自己怎么封装

  • 相关阅读:
    easyui多选与接收不一致解决方案
    PEP8规范总结
    python2与python3的区别
    双下方法(魔术方法内置方法)
    文件操作
    抽象类,接口类,归一化设计,多态,鸭子类型
    html
    数据库的初识
    boby标签中相关标签
    爬虫介绍
  • 原文地址:https://www.cnblogs.com/mxyr/p/10787972.html
Copyright © 2011-2022 走看看