表格固定表头 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         /* div {
 11             height: 200px;
 12             overflow: hidden;
 13             overflow-y: auto;
 14             margin: 55px;
 15         }
 16 
 17         table {
 18             margin-top: -3px;
 19         }
 20         thead{
 21             background: rgb(255, 255, 255);
 22         } */
 23 
 24 
 25 
 26         div {
 27             height: 200px;
 28             overflow: hidden;
 29             margin: 55px;
 30         }
 31 
 32         .zz {
 33             display: block;
 34             height: 170px;
 35             overflow: auto;
 36         }
 37 
 38         thead {
 39             display: block;
 40         }
 41     </style>
 42 </head>
 43 
 44 <body>
 45     <div class="aa">
 46         <table>
 47             <thead>
 48                 <tr>
 49                     <th>Month</th>
 50                     <th>Savings</th>
 51                 </tr>
 52             </thead>
 53 
 54             <tbody class="zz">
 55                 <tr>
 56                     <td>Sum</td>
 57                     <td>$180</td>
 58                 </tr>
 59                 <tr>
 60                     <td>Sum</td>
 61                     <td>$180</td>
 62                 </tr>
 63                 <tr>
 64                     <td>Sum</td>
 65                     <td>$180</td>
 66                 </tr>
 67                 <tr>
 68                     <td>Sum</td>
 69                     <td>$180</td>
 70                 </tr>
 71                 <tr>
 72                     <td>Sum</td>
 73                     <td>$180</td>
 74                 </tr>
 75                 <tr>
 76                     <td>Sum</td>
 77                     <td>$180</td>
 78                 </tr>
 79                 <tr>
 80                     <td>Sum</td>
 81                     <td>$180</td>
 82                 </tr>
 83                 <tr>
 84                     <td>Sum</td>
 85                     <td>$180</td>
 86                 </tr>
 87                 <tr>
 88                     <td>Sum</td>
 89                     <td>$180</td>
 90                 </tr>
 91                 <tr>
 92                     <td>Sum</td>
 93                     <td>$180</td>
 94                 </tr>
 95             </tbody>
 96         </table>
 97     </div>
 98     <script>
 99         // var tableCont = document.querySelector('.aa');
100         // tableCont.addEventListener('scroll', (scrollHandle).bind(this));//添加滚动监听事件
101 
102         // // 表格头部固定
103         // function scrollHandle(e) {
104         //     let that = e.target;
105         //     let scrollTop = that.scrollTop;
106         //     //that 就是 tableCont，， 下面是查找字节点
107         //     that.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
108         // }
109     </script>
110 </body>
111 
112 </html>

 

posted @ 2020-03-12 15:40  今夜你是我的模特  阅读(60)  评论(0)    收藏  举报