如果没有空间填充，如何使展开以填充空间，而不拉伸父级？[英]How to make a expand to fill space, without stretching parent if there is no space to fill? 本文翻译自 Joseph 查看原文 2015-03-05 471 css/

In a page I am working on, I have a table inside of another table. The inner table may get quite large, so I want it to have overflow-y: scroll so it doesn't make the outer table unnecessarily large. I understand that to make this work, I need to put the inner table inside a div.

在我正在处理的页面中，我在另一个表中有一个表。内部表可能会变得非常大，所以我希望它有溢出y：滚动所以它不会使外表不必要地大。我理解为了使这个工作，我需要将内部表放在div中。

This works well enough: I can set the height of the div that is inside a td, and that div will scroll so the table contained inside it doesn't make the outer table huge.

这很好用：我可以设置td内部div的高度，并且div将滚动，因此包含在其中的表不会使外表变大。

But my scenario is a little bit more complex than this. The td that the div is in spans multiple rows. In the case that the total height of the rows it spans is greater than the height I've set for the div, I'd like the div to expand to take up the empty space.

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

Here is a jsFiddle which demonstrates the functionality I'm looking for: http://jsfiddle.net/g0h5bu75/ The div in the Nop td scrolls so it doesn't stretch that cell. If you add some content to the Bar/Baz/Qux cells (e.g, http://jsfiddle.net/be5re2oj/), the div and its inner table expands to fill the space.

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

Currently I'm achieving this effect using jQuery to calculate and set the height, but it seems sloppy and hackish to me. Maybe that's what I have to do considering this ugly table layout, but I'm wondering if there's a better way of going about this.

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

2 个解决方案

#1

What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning:

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

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>

Notice that the table cell which contains the inner table needs to be positioned relatively so that the div will be aligned inside it. Then you set left, right, top and bottom to zero, so the div fits exactly to the cell which was rendered as if it was empty.

请注意，包含内部表的表格单元格需要相对定位，以便div在其中对齐。然后你将left，right，top和bottom设置为零，这样div就完全适合被渲染的单元格，就好像它是空的一样。

#2

Move one table from another and add big table container to divide view on half.

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

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

#1