angular - 修复了 primeng DataTable 中的标题

Question

我正在使用 PrimeNG 4.1.0-rc.2。

我要创建的是具有固定标题的数据表。即使我将表格滚动到底部(如 stackoverflow 顶部的固定菜单)，标题也应该始终可见。

我尝试了 p-dataTable 的 scrollable 和 scrollHeight 属性，但在表格一侧有一个滚动条。我不需要它，因为我已经为整个页面准备了一个。 我还尝试用 position: fixed 修复它，但随后表格标题和表格内容的大小不同。

如有任何帮助，我们将不胜感激。

现在我有这样的东西:http://embed.plnkr.co/bnB2ZDvDPZos3JLMmVFe/ 有 scrollable 选项打开并且 position: fixed 被注释掉。

Answer 1

我找到了解决方案，我应该使用 position: sticky 和 scrollable。 这是一个例子:http://embed.plnkr.co/jZJ3it0ARLLYSe0zI6DL/

也许这对任何人都有帮助。

编辑: 最后还有另一种解决方案。在组件中:

private isScrolled: boolean = false;
constructor(private renderer: Renderer) {
    window.onscroll = () => {
        this.zone.run(() => {
             var header = document.getElementsByClassName('ui-datatable-scrollable-header')[0];
             this.isScrolled = window.pageYOffset > 35; // there is another sticky on the top in my app
             this.renderer.setElementClass(header, 'header_scrolled', this.isScrolled);
        });
    }
}

和 CSS:

.header_scrolled {
    position: fixed !important;
    top: 60px; 
}