在HTML/CSS中维护大小和滚动嵌套表

我正在构建一个相对复杂的页面，其中包含一些应该滚动的嵌套表。尽管我尽可能多地阅读HTML表格，但我似乎不明白发生了什么

看

我希望顶部面板部分始终是屏幕的80%，底部是屏幕的20%

table.outer-table tr.outer-table-row1 {
    height:80%;
}
table.outer-table tr.outer-table-row2 {
    height:20%;
}

我假设将“overflow:auto”放在中，这将使嵌套表滚动，同时保持外部表的80%/20%比率。然而，它似乎只是将细胞推出，使顶部和底部各占50%

如何使屏幕的顶部为80%，右侧的嵌套表格滚动，底部为20%，底部的嵌套表格滚动

---

谢谢

通常不建议对表格进行布局。除非你使用的是邮件营销或不支持div的怪异浏览器

我喜欢使用css属性对div进行布局：

display: table; 
display: table-row;
display: table-cell;

它为div提供了一些表格式的布局功能

我用divs为你树立了一个榜样

您可以将真正需要的表放在div中。但要使用百分比大小，必须确保最外层的元素具有固定大小。可以是divmain，也可以是布局的其他外部包装器

---

希望它能帮助

依赖于表格和百分比大小的复杂布局。是否要求使用表格？你不能按div更改一些表吗？然后可以将div的类似于表的行为与样式一起使用：display:table；显示：表格行；并显示：表格单元格；just do float：在内部div上向左，它是ok！这是正确的，但取决于对固定尺寸的需要，我不确定这是否有可能，至少没有提及。如果OP同意使用固定尺寸，我会投票支持这个答案。顺便说一句，对于可变尺寸，他可以用vh代替百分比，无论固定与否，它都会起作用。外部元素必须具有固定尺寸。这可能是他布局的主要部分。然后，对于孩子们，他将不得不按百分比计算，因为他们从各自的父母那里得到了尺寸。