jquery - 如果没有空间可填充，如何使 扩展以填充空间而不拉伸(stretch)父级？

Question

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

这很好用:我可以设置 td 内的 div 的 height，然后那个 div 会滚动，所以包含在其中的表不会使外部表变大。

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

这是一个 jsFiddle，它演示了我正在寻找的功能: http://jsfiddle.net/g0h5bu75/Nop td 中的 div 会滚​​动，因此它不会拉伸(stretch)该单元格。如果您向 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 就完全适合呈现为空的单元格。