粘性表格标题不适用于角材料 mat-sidenav-container

Question

嘿嘿，

使用有角度的材料时，我在 html/css 表格和粘性标题方面遇到了一些麻烦。

在我的项目中，我使用带有<mat-sidenav-container>,<mat-sidenav>和<mat-sidenav-content>. 在<mat-sidenav-container>表格的粘性标题内不起作用。

我在 github 上创建了一个小项目来轻松重现该问题：
Repo：https : //github.com/ManticSic/angular-material-sticky-table-issue
GH 页面：https : //manticsic.github.io/angular-material -粘性表问题/

表格标题向下移动 64px，而不是在滚动时固定在 y=64px。

你知道我该如何解决这个问题吗？

干杯和谢谢

---

笔记

• 如果将标题粘贴/固定在页面顶部，那就没问题了，因为当我在需要此视图的地方使用此视图时，只会显示一个表格。但我需要具有正确宽度的适当列。
• 我希望我的问题可以在没有 JavaScript 的情况下解决
• 该解决方案必须适用于最新版本的 firefox、chrome/chromium、safari 和三星移动浏览器

---

不工作的解决方案

• position:fixed在 app-table-header 上并position:sticky从单元格中删除：不起作用，因为列宽度不正确

Answer 1

删除/覆盖 mat-sidenav-container 和 mat-sidenav-content 的溢出属性将解决该问题

如果未设置，Angular Material 将自动生成 mat-sidenav-content。

导航.component.sass

mat-sidenav-container, mat-sidenav-content
  overflow: initial

感谢所有访问过这个问题的人！