固定表头与表格内容对齐 表格内容滚动

<div class="table">
   <div class="table-head">
   <table>
       <colgroup>
           <col style="width: 80px;" /><col />
       </colgroup>
       <thead>
          <tr style="height: 45px;">
          <th>序号</th>
          <th>我只是用来测试的</th>
          <th>我只是用来测试的</th>
          <th>我只是用来测试的</th>
          <th>我来测试的</th>
          <th>我来测试的</th>
          </tr>
       </thead>
   </table>
   </div>
   <div class="table-body">
   <table>
       <colgroup><col style="width: 80px;" /><col /></colgroup>
       <tbody>
           <tr>
            <td>1</td>
            <td>我只是用来测试的</td>
            <td>我来测试的</td>
          <td>我来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>2</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>3</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>4</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>5</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>6</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>7</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>8</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>9</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>10</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>11</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>12</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
            <td>13</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
           </tr>
           <tr>
          <td>14</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          <td>我只是用来测试的</td>
          </tr>
           <tr>
            <td>15</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
            <td>我只是用来测试的</td>
           </tr>
       </tbody>
   </table>
   </div>
</div>
<!-- 1、使用了colgroup标签，来对上下两个表格的列宽进行了定义，让他们保持一致。
2、上边的div .table-head添加了样式 padding-right : 17px ，这个宽度是为了保证跟下边的div .table-body的滚动条保持一致，同时下边的表格.table-body添加了样式 overflow-y : scroll ; -->