表格固定头部，tbody滚动

html

<table class="table" cellspacing="0" cellpadding="0">
    <thead class="fixedThead">
       <th>学号</th>
       <th>姓名</th>
       <th>年龄</th>
     </thead>
     <tbody class="scrollTbody">
         <tr>
           <td>001</td>
           <td>张三</td>
           <td>15</td>
         </tr>
      </tbody>
 </table>

css

.table thead {
  background: #f8f8f8;
}
.table {
  width: 96vw;
  border-collapse: collapse;
  border-spacing: 0;
}
.fixedThead {
  display: block;
}
.scrollTbody {
  width: 96vw;
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.table td,
.table th {
  border-bottom: none;
  border-left: none;
  padding: 2px 3px 3px 4px;
}
.table thead th {
  width: 20vw;
  border: 1px solid #f1f1f1;
  padding-left: 3vw;
}
.table tbody td {
  width: 20vw;
}
.table tr:nth-child(even) {
  background: #f6fcfa;
}
.table tr:nth-child(odd) {
  background: #ffffff;
}