调整大小和滚动保持静态高度

Question

我有以下标记：

<table class="someclass">
  <thead>
    <tr>
      <td>
        <div>
          <h1>Click to change height</h1>
        </div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>(repeated many times)
      <td>some text</td><td>some other text</td>
    </tr>
  </tbody>
</table>

以及以下样式：

tbody {
  display:block;
  overflow:auto;
}
table {
  height:200px;
}

目前<h1>有一些jquery最终会改变其父级的高度（我假设<thead>的高度。）<table>应该保持它的高度和<tbody>应缩小以适应。目前我所拥有的是webkit（chrome和safari），并且在IE和Firefox中惨遭失败。我看到的大多数问题都有相反的问题，我很困惑为何会发生这种情况。

这里编辑的是jQuery：

$(".someclass h1").click(function(){
  $(this).parent().css("height", "150px");
});

http://jsfiddle.net/kXCX6/2/（这是我想要的方式，即使它在结构上相同，我的代码也不会这样做）