如何在内容更改时获取表头以更改大小

Question

我有一个带有表头的表来跟上滚动。当有人点击内容行时，会打开一些额外的行。问题是标题表没有改变大小以跟上内容的变化。主要目标是始终将标题保持在顶部，并在单击行时匹配内容的大小。

<div ng-app ng-controller="ctrl">
  <table>
    <tr style="background:red;">
      <td>one</td>
      <td>open</td>
    </tr>
  </table>
  <div style="height: 66px; overflow-y: scroll;">
    <table>
      <tbody ng-repeat="item in items"  ng-click="showSubs = !showSubs">
        <tr>
          <td>{{item.text}}</td>
          <td>{{item.text2}}</td>
        </tr>
        <tr ng-repeat="sub in subItems" ng-show="showSubs">
          <td colspan="2">
            {{sub.text}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

jsfiddle