Question

以下问题。我有一些div表示父容器。在div里面，我有一个嵌套的table，可以滚动。父div被攻击。因此，当我调整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/

Answer 1

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

使用alsoResize

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

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

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

Answer 2

您可以使用Css resize属性。但这不会受到互联网浏览器和歌剧的支持。你需要添加

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

并添加此

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

查看演示here

用于自动缩放嵌套表的CSS样式

2 个答案: