嘿嘿,
我在使用 Angular Material 时遇到 html/css 表格和粘性标题的问题。
在我的元素中,我将 Angular Material sidenav 与 <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-sticky-table-issue/
滚动时表头向下移动 64px,而不是固定在 y=64px。
你知道我该如何解决这个问题吗?
干杯,谢谢
注意事项
- 如果页眉粘贴/固定到页面顶部就没问题了,因为当我在需要它的地方使用这个 View 时只显示一个表格。但我需要宽度正确的适当列。
- 我希望我的问题可以在没有 JavaScript 的情况下得到解决
- 该解决方案必须适用于最新版本的 firefox、chrome/chromium、safari 和三星移动浏览器
不工作的解决方案
-
position:fixed
在 app-table-header 上删除position:sticky
来自细胞: 不工作,因为 colum-width 不正确
最佳答案
删除/覆盖 mat-sidenav-container 和 mat-sidenav-content 的溢出属性将解决这个问题
如果未设置 Angular Material 将自动生成 mat-sidenav-content。
导航.component.sass
mat-sidenav-container, mat-sidenav-content
overflow: initial
感谢所有访问过此问题的人!
关于css - 粘性表格标题在 Angular Material mat-sidenav-container 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52441095/