css - 粘性表格标题在 Angular Material mat-sidenav-container 中不起作用

标签 css angular html-table angular-material sticky

嘿嘿,

我在使用 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/

相关文章:

jquery - 获取div宽度jquery

html - 随机 SVG 图标无法加载

jquery 列表,保持事件突出显示

javascript - 当我在我的 HttpInterceptor 类中注入(inject)使用 HttpClient 的服务时,Angular 6 进入循环依赖的无限循环

javascript - 我如何使用 jquery 或 DOM 从 HTML 表格中获取单元格?

javascript - JSON 对象到 Mustache.js 表

使用 Sprite 的 CSS 背景定位

javascript - typescript 错误 - 属性 'headers' 的类型不兼容

Angular CDK 拖放 - 对齐网格

html - 如何消除表格行中的空白?