Question

我的目标是拥有一个在顶部具有固定区域的布局，然后在剩余的可用区域中具有一个表格（带有滚动条）。我已经简化了此步骤，以方便提出这个问题。

我试图通过将特定大小的div（在此示例中为300x300像素）显示为青色来实现此目的，该div包含一个包含两行的表，第一行包含标题，然后第二行一个包含div的文件，该div又包含包含要滚动的数据的表。

table {border-collapse: collapse;}
table,th,td {border: 1px solid gray;}
table.nowrap {white-space: nowrap;}

<html>
    <body>
        <div style="width:300px; height:300px; background-color: cyan;">
            <table>
                <tr style="height:40px;background-color: lightblue;">
                    <td>This is the static header</td>
                </tr>
                <tr>
                    <td>
                        <div style='width:100%; height:100%; overflow:scroll;'>
                            <table class='nowrap'>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                                <tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>

如果运行此命令，它将显示以下内容，但我不明白为什么。高度/宽度为100％，因此它不应该从父级继承尺寸吗？

如果我换行

<div style='width:100%; height:100%; overflow:scroll;'>

到

<div style='width:300px; height:260px; overflow:scroll;'>

然后，它在div ..中显示可滚动表，这是正确的（或者至少是我想要的）。但是我不知道确切的尺寸，因为屏幕是动态构建的，并且是在不同的浏览器等上构建的。

因此，如果我指定div的确切宽度（在td内）而不是一个百分比，则可以正常工作-是否可以从另一个父级而不是外部{{1} }？

Answer 1

有许多比使用表格更好的方法，但我适合您的方法。

这是将获得所需结果的完整html代码（只需阅读注释即可查看更改）：

<html>

    <head>
        <title>Table</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            table {
                border-collapse: collapse;
            }

            table,
            th,
            td {
                border: 1px solid gray;
            }

            table.nowrap {
                white-space: nowrap;
            }
        </style>
    </head>

    <body>

        <!-- Added position:relative to the div -->
        <div style="width:300px;position: relative;height:300px;background-color: cyan;">

            <!-- Change the table position to absolute and make its width and height 100% of the parent's -->
            <table style="position: absolute;width: 100%;height: 100%;">
                <tbody>
                    <tr style="height:40px;background-color: lightblue;">
                        <td>This is the static header</td>
                    </tr>
                    <tr>
                         <!-- Added position:relative to the cell so the div will fit to it -->
                        <td style="position: relative;">
                            <!-- Make the div position absolute and position it to the top of the cell -->
                            <div style="position: absolute;top: 0;width:100%;height:100%;overflow:auto;">
                                <!--Set width and height to 100% so it will always fill the div-->
                                <table class="nowrap" style="width:100%;height:100%">
                                    <tbody>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                        <tr>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                            <td>An item in the table</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

防止HTML表溢出包含的div

1 个答案: