Html 自动缩放嵌套表的CSS样式

下面的问题。我有一些

div

，它表示父容器。在

div

中，我有一个嵌套的

表

，可以滚动。父级

div

已分层。因此，当我调整

div

容器的大小时，我也想调整嵌套

表的大小。下面给出的代码不支持这一点。我怎么做？也许我需要所有文件的不同结构

重要提示-我需要不使用
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>    

#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'});
});

这里的fiddle-
有一个非常简单的选项，因为您已经在使用jQuery UI可调整大小的小部件

使用

一个或多个元素与可调整大小的同步调整大小
元素

工作示例

您可以使用Css调整大小属性。但internet explorer和opera不支持这一点。您需要添加

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

再加上这个

#wrapper_table::-webkit-scrollbar{
display:none;}

查看演示

#wrapper_table::-webkit-scrollbar{
display:none;}