如果没有要填充的 space，如何使 <div> 展开以填充 space，而不拉伸父对象？

Question

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

这很好用：我可以设置 td 内 div 的 height，div 将滚动，因此 table 包含在里面不会使外部 table 变大。

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

这是一个 jsFiddle，它演示了我正在寻找的功能： http://jsfiddle.net/g0h5bu75/ Nop td 中的 div 滚动，因此它不会拉伸该单元格。如果您向 Bar/Baz/Qux 单元格添加一些内容（例如，http://jsfiddle.net/be5re2oj/），div 及其内部 table 将扩展以填充 space。

目前，我正在使用 jQuery 来计算和设置高度来实现此效果，但对我来说这似乎草率和老套。考虑到这种丑陋的 table 布局，也许这就是我必须要做的，但我想知道是否有更好的方法来解决这个问题。

Answer 1

将一个 table 从另一个移开并添加大 table 容器以将视图分成两半。

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

Answer 2

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

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>

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

如果没有要填充的 space，如何使 <div> 展开以填充 space，而不拉伸父对象？

How to make a <div> expand to fill space, without stretching parent if there is no space to fill?

html

css

jquery

html-table