自动缩放嵌套表的CSS样式

Question

问题如下。我有一些div，它代表了父容器。在div里面有一个嵌套的table，可以滚动。母体div被拉伸。所以，当我调整div容器的大小时，我也想调整嵌套的table的大小。下面给出的代码不支持这个。我该怎么做呢?也许我需要不同的文档结构?

重要提示-我需要不使用JavaScript的解决方案。

:

<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/

Answer 1

可以使用Css的resize属性。但是ie和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;}

点击这里查看演示

Answer 2

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

使用alsoResize

一个或多个元素要与resizable同步调整大小

元素。

工作示例http://jsfiddle.net/y4Bk2/2/

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