Question

嘿，

使用棱角材质时，我在使用html / css表和粘性标题时遇到了麻烦。

在我的项目中，我将角材料sidenav与<mat-sidenav-container>，<mat-sidenav>和<mat-sidenav-content>一起使用。在<mat-sidenav-container>内部，表格的粘贴标头不起作用。

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

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

您是否知道我该如何解决？

欢呼声和敬意

注释

如果标头粘贴/固定在页面顶部，这没关系，因为当我在需要此视图的地方使用此视图时，仅显示一个表。但是我需要具有正确宽度的适当列。
我希望我的问题可以在不使用JavaScript的情况下得以解决
该解决方案必须在最新版本的Firefox，Chrome /铬，Safari和三星移动浏览器中工作

无效的解决方案

position:fixed并从单元格中删除position:sticky：不起作用，因为列宽不正确

Answer 1

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

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

navigation.component.sass

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

向所有访问此问题的人致谢！

Answer 2

使用位置：固定而不是粘性，宽度：100％希望这会有所帮助。

例如：

app-table-header {
    font-size: 1.2em;
    font-weight: 700;
    position: fixed;
    top: 64px;
    z-index: 10;
    width: 100%;
    background: #fafafa;
}

我为app-table-header添加了相同的表格背景颜色，因此看起来会更好。

粘式表标头不适用于有角材料的垫子-sidenav-容器

2 个答案: