Html 如何保持表的高度包含在父div中_Html_Css_Html Table

Html 如何保持表的高度包含在父div中

html css

Html 如何保持表的高度包含在父div中,html,css,html-table,Html,Css,Html Table,我不知道如何将这个表的高度控制在包含div中。我的目标是能够滚动以查看所有内容。在处理宽度时，有很多解决方案，但我无法让它们处理高度 <html> <head> <style> .container { border: 1px solid black; height: 100px; } td { font-size: 40px;

我不知道如何将这个表的高度控制在包含div中。我的目标是能够滚动以查看所有内容。在处理宽度时，有很多解决方案，但我无法让它们处理高度

<html>

<head>
    <style>
        .container {
            border: 1px solid black;
            height: 100px;
        }

        td {
            font-size: 40px;
        }

        table {
            table-layout: fixed;
            height: 100%;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>
                        header
                    </th>
                    <th>
                        header
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
                </tr>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
                </tr>
                <tr>
                    <td>
                        data
                    </td>
                    <td>
                        data
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>


.集装箱{
边框：1px纯黑；
高度：100px；
}
运输署{
字体大小：40px；
}
桌子{
表布局：固定；
身高：100%；
溢出y：滚动；
}
标题
标题
数据
数据
数据
数据
数据
数据

您需要在容器上应用

overflow-y:scroll

您需要在容器上应用

overflow-y:scroll

.container{
边框：1px纯黑；
高度：100px；
溢出y：滚动；
}
运输署{
字体大小：40px；
}
桌子{
表布局：固定；
身高：100%；
}


标题
标题
数据
数据
数据
数据
数据
数据

.container{
边框：1px纯黑；
高度：100px；
溢出y：滚动；
}
运输署{
字体大小：40px；
}
桌子{
表布局：固定；
身高：100%；
}


标题
标题
数据
数据
数据
数据
数据
数据

添加显示：块；至表格

     table {
        table-layout: fixed;
           height: 100%;
        overflow-y: scroll;
        display:block;
    }

添加显示：块；至表格

     table {
        table-layout: fixed;
           height: 100%;
        overflow-y: scroll;
        display:block;
    }

您应该寻找一些关于溢出的好提示。
如果你想控制y-axe中的文本，可以查看和。

你应该寻找一些关于溢出的好技巧。
如果你想控制y轴上的文字，可以看一下

     table {
        table-layout: fixed;
           height: 100%;
        overflow-y: scroll;
        display:block;
    }