如果没有空间要填充，<div>如何进行扩展以填充空间，而无需拉伸父项？

Question

在我正在处理的页面中，我在另一个表中有一个表。内部表可能会变得很大，所以我希望它有overflow-y: scroll，这样它就不会使外部表变得不必要的大。我知道要使这个工作，我需要把内部表放在一个div.中

这很好：我可以设置td内部的div的height，并且该div将滚动，这样它内部包含的表就不会使外部表变大。

但我的情况要比这复杂一点。div所在的td跨越多行。如果它所跨行的总高度大于我为div设置的高度，我希望div展开以占用空白空间。

下面是一个jsFiddle，它演示了我正在寻找的功能：http://jsfiddle.net/g0h5bu75/Noptd中的div滚动，因此不会拉伸该单元格。如果您向Bar/Baz/Qux单元格添加一些内容(例如，http://jsfiddle.net/be5re2oj/)，div及其内部表展开以填充空间。

目前，我正在使用jQuery来计算和设置高度，以达到这种效果，但对我来说，这似乎很草率和粗糙。考虑到这种丑陋的桌子布局，也许这就是我必须做的，但我想知道是否有更好的方法来实现这一点。

Answer 1

您需要的基本上是将内部表从文档流中排除，这可以使用绝对定位来实现：

table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
#test
{
overflow-y: scroll;
position:absolute;
top:0px;
right:0; 
left:0;
bottom:0;
}

<table style="width:100%">
<tr>
<th colspan="4">This is my Header</th>
</tr>
<tr>   
<th class="nop-border" style="width:10%">Foo</th>
<td style="width:40%">Lorem ipsum...</td>
<th style="width:5%">Nop</th>
<td  style="position:relative;width:45%" rowspan="4">
&nbsp;
<div id="test" >
<table style="width:100%">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<th class="nop-border" >Bar</th>
<td>...</td>
</tr>
<tr>
<th class="nop-border" >Baz</th>
<td>...</td>
</tr>
<tr>
<th class="nop-border" >Qux</th>
<td>...</td>
</tr>
<tr>
<td colspan="4">Call this a footer...</td>
</tr>
</table>

请注意，包含内部表格的表格单元格需要相对定位，以便div在其中对齐。然后将左、右、上和下设置为零，以便div完全适合呈现为空的单元格。

Answer 2

将一个表从另一个表中移动，并添加大表容器以将视图一分为二。

<table style="width:100%">
<tr>
<th colspan="4">This is my Header</th>
</tr>
<tr>
<td width="55%" valign="top">
first table
</td>
<td width="45%" valign="top">
second table
</td>
</tr>
</table>

http://jsfiddle.net/g0h5bu75/1/