Angular material table 粘性 headers 未按预期工作

Question

我在 angular material table 上用粘性 header 分叉了示例，并添加了更多数据。我看到 header 不粘。 Stackblitz here

有人知道 header 是如何保持粘性的吗？

Answer 1

Answer 2

为您的 table 容器指定高度：

.example-container {
  height: 400px;
  overflow: auto;
}

Answer 3

你的例子中的问题是 table 容器有 overflow: auto 和 height: 100%；这是不必要的，因为如果 table 内容大于视口，页面将已经附加了一个滚动条。

我已经通过删除附加到 .example-container 的所有样式来修复它。

这样，sticky 元素将相对于页面顶部进行设置。

让我知道它是否适合你。

Answer 4

material 扩展 table 和相关示例存在相同问题。我通过设置溢出来解决：隐藏在scr文件夹下的style.css中，如下：

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; overflow: hidden; }

并修改 CSS .example-container in

.example-container {
  height: 100vh;
  overflow: auto;
 }

您只会看到 table 滚动条。

希望对某人有所帮助

Angular material table sticky headers not working as expected