html - 可滚动 tbody 的 td 内的 div。滚动条问题

Question

table > tbody {
    height: 600px;
    display: block;
    overflow: auto;
}

table > tbody > tr {
    width:100%;
    height: 1440px;
    display:table;
    table-layout:fixed;
}

此 css 生成可滚动的“table”或可滚动的“tr”。有用。但我的问题是我在'tr'内的'td'内有一个'div'。当我将 'div' 的高度设置为 100% 或任何高度时，整个 'div' 不在 tbody 的可见范围内，在本例中为 600px，document 出现。表格的滚动条在有和没有“div”的情况下是一样的。

文档的滚动条延伸到“div”底部应该在“tbody”“后面”的位置。当我滚动表格时，文档的滚动条没有变化。

这是我的问题的一个非常粗略的版本:https://jsfiddle.net/hL8hemka/14/

如您所见，有两个滚动条。如果看不到两个，请尝试删除 css 部分中的 div { height: 100% } 。您会注意到右侧(文档滚动条应位于的位置)的两个条之一消失了。

如何在文档上制作一个 tr 高度为 100% 而没有滚动条的 div？

Answer 1

我在你的 fiddle 中没有看到两个滚动条，除非你的意思是有一个水平滚动条和一个垂直滚动条？

无论哪种方式，如果您想在任何元素上隐藏滚动条，只需将 overflow-x 或 overflow-y(取决于滚动条是垂直的还是水平的)设置为隐藏。例如，如果我想隐藏垂直滚动条，我会在我的 css 中将 overflow-x 设置为 hidden，如下所示:

body {
   overflow-x: hidden;
}