自动缩放嵌套表的CSS样式

以下问题。我有一些 div 其呈现父容器。在里面 第二部分 我有一个嵌套 table ,可以滚动。父级 第二部分 是分层的。所以,当我调整我的 第二部分 容器我想调整嵌套的大小 桌子 也下面的代码不支持这一点。我该怎么做?也许我需要所有文档的不同结构?

重要提示-我需要不使用 JavaScript .

HTML代码 :

<div id="main_container">
<table id="wrapper_table">
<tbody>
  <tr>
    <td class="cell">
      <div class="wrapper">
        <table>
          <tr>
            <td>test content</td>
            <td>test content</td>
          </tr>
          ...  
        </table>
        </div>
      </td>
    </tr>
    </tbody>
</table>
</div>    

CSS代码 :

#main_container {  
  position:fixed;
  top:0px; 
  height: 200px;
  border:1px solid black;
  top:30px;    
}

#wrapper_table {
    width:100%;    
}

.wrapper {
  overflow:scroll;
  height:100%;
}

.cell {
    height: 200px;   
}

JavaScript代码:

$(document).ready(function() {
   $('#main_container').resizable({handles: 'n,e'});
});

这里的小提琴- http://jsfiddle.net/y4Bk2/