Question

在我正在处理的页面中，我在另一个表中有一个表。内部表可能会变得非常大，所以我希望它具有overflow-y: scroll，因此它不会使外表不必要地变大。我明白为了使这项工作，我需要将内部表放在div中。

这很有效：我可以设置height内的div的{{1}}，并且该div会滚动，因此其中包含的表格不会使外表巨大。

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

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

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

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

请注意，包含内部表的表格单元格需要相对定位，以便div在其中对齐。然后你将left，right，top和bottom设置为零，这样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/

如果没有空间来填充，如何使<div>展开以填充空间，而不拉伸父级？</div>

2 个答案: