使用CSS固定标头的可滚动表

Question

我尝试使用固定标题在两个轴上滚动一个大表。什么是最简单的方法？我只用CSS尝试过，但我的问题是当水平滚动条在左侧时隐藏了垂直滚动条：

JSFiddle example

＆＃13;

＆＃13;

table,
tr td,
tr th {
  border: 1px solid grey
}

div.table-holder {
  width: 300px;
  overflow-x: auto;
}

table {
  overflow: hidden;
}

tbody {
  display: block;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc( 100% - 17px)
}

td,
th {
  width: 35px;
  overflow: hidden;
}

＆＃13;

<div class="table-holder">
  <table>
    <thead>
      <tr>
        <td>Gaga001</td>
        <td>Gaga002</td>
        <td>Gaga003</td>
        <td>Gaga004</td>
        <td>Gaga005</td>
        <td>Gaga006</td>
        <td>Gaga007</td>
        <td>Gaga008</td>
        <td>Gaga009</td>
        <td>Gaga010</td>
        <td>Gaga011</td>
        <td>Gaga012</td>
        <td>Gaga013</td>
        <td>Gaga014</td>
        <td>Gaga015</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
        <td>011</td>
        <td>012</td>
        <td>013</td>
        <td>014</td>
        <td>015</td>
      </tr>
      <tr>
        <td>001</td>
        <td>002</td>
        <td>003</td>
        <td>004</td>
        <td>005</td>
        <td>006</td>
        <td>007</td>
        <td>008</td>
        <td>009</td>
        <td>010</td>
        <td>011</td>
        <td>012</td>
        <td>013</td>
        <td>014</td>
        <td>015</td>
      </tr>
      [...]
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

有什么想法来解决这个或其他建议来解决CSS中的问题？我不想包含其他框架......