table 头尾固定，中间滚动

上网试过了很多方法，我总结了一下是以下两种：
法一：用 table 内部属性 thead tbody tfoot
法二：用两个 table 标签

各取所长，整理出一个近乎完美的方法。

html:

<div style="width: 800px;">
    <div class="table-head">
      <table>
          <colgroup>
              <col style="width: 40px;"/><col/>
          </colgroup>
          <thead>
              <tr><th>序号</th><th>内容</th><th>内容内容内容</th></tr>
          </thead>
      </table>
    </div>
    <div class="table-body">
      <table>
          <colgroup>
            <col style="width: 40px;" /><col />
          </colgroup>
          <tbody>
              <tr><td>1</td><td>我只是用来测试的</td><td>我只是用来测试的</td></tr>
          </tbody>
      </table>
    </div>
</div>

css:

  table{border-collapse: collapse;table-layout:fixed}
  table tr td{border:1px solid #999}
  table tr th{border:1px solid #999}
  .table-head{background-color:#ddd;color:#000;padding-right:17px;}
  .table-body{width:100%; height:300px;overflow-y:scroll;}
  .table-head table,.table-body table{width:100%;}

实现结果图

但当数据少的时候 旁边的滚动条会始终存在

image.png