使表头固定，但需要在x和y方向滚动

Question

我想固定表头，但需要在x和y方向滚动。 请查看此链接以获取我的代码。 jsFiddle

.tableOuterDiv{
  overflow:auto;
  height:100px;
  width:300px;
  background-color:#ccc;
}
th{
  width :100px;
  background-color:green;
}
body{
  background-color:orange;
}

<div class="tableOuterDiv">
<table  id=" ">
  <thead>
    <tr>
      <th>heading 1</th>
      <th>heading 2</th>
     <th>heading 3</th>
      <th>heading 4</th>
      <th>heading 5</th>
      <th>heading 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
    <tr>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
      <td>body data</td>
    </tr>
  </tbody>
</table>
</div>

我想修复thead并需要在x和y方向滚动。