如何在保持 tbody 仅滚动的同时将最大高度调整为百分比？

Question

我正在使用此方法在 tbody 内滚动：

tbody {
      display:block;
      max-height:575px;
      overflow-y:scroll;
      }
thead, tbody tr {
      display:table;
      width:100%;
      table-layout:fixed;
      }

我遇到的问题是，在我的实例中使用固定高度会导致设备间不一致，我没有时间为每个可能的设备重写它。理想情况下，我想做的是填充 parent 的 100%，同时保持 tbody 仅滚动。这可能吗？

我已经阅读了很多关于锁定 headers 的帖子并尝试了一些主要的，但是 none 完全按照我的需要工作。上面的示例是我最接近的示例，但 max-height 对我不起作用。

Answer 1

您可以使用 CSS Flexbox

实现此目的

假设您有这样的 HTML 布局：

<table>
  <thead></thead>

  <tbody></tbody>
</table>

下面的CSS将创建一个固定的header和可滚动的body。 body 将始终填充页面上剩余的 space。

table {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

tbody {
  flex: 1;
  overflow-y: scroll;
}

如何在保持 tbody 仅滚动的同时将最大高度调整为百分比？

How to adjust max height to percentage while maintaining tbody only scroll?

html

css

header