角材料表粘性标题未按预期工作答案

【问题标题】：Angular material table sticky headers not working as expected角材料表粘性标题未按预期工作
【发布时间】：2020-03-20 12:09:38
【问题描述】：

我在带有粘性标题的角材料表上分叉了示例，并添加了更多数据。我看到标题不粘。 Stackblitz here

有人知道标题如何保持粘性吗？

【问题讨论】：

【解决方案1】：

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

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

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

让我知道它是否适合你。

【讨论】：

【解决方案2】：

为您的表格容器指定高度：

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

【讨论】：

【解决方案3】：

【讨论】：

但我希望表格占据整页高度。我不想限制桌子高度
使用 100vh 而不是 100px 作为您的桌面高度
有两个滚动条。页面滚动条和表格容器滚动条。这不是我需要的。 Primeng 有一个很好的例子来说明粘性标题必须如何工作。 https://www.primefaces.org/primeng/#/table/sticky
mat table sticky 选项用于在滚动表格内容时保持表格标题可见