PrimeNG：滚动时粘贴表格标题

Question

我将 Angular 4 与 PrimeNG 4.2.1 搭配使用。

滚动内容时，我需要在屏幕上粘贴表格标题。这是how it looks like in PrimeNG JSF components 的示例，但不幸的是Angular DataTable component 中没有类似的内容。

我尝试使用here 或here 所描述的标准 html+css 方式，但我没有成功（我设法在表格内有一个滚动条，但它阻止了其余部分用户界面）。我也试过this solution，但是没用。

问：有没有办法让 PrimeNG DataTable 组件标题在滚动时固定？

我想解决方案可能很简单，但我不是前端技术专家。

更新： 可以在 DataTable 组件上设置scrollable 和scrollHeight，以便自动显示滚动条。它工作得很好，但是我无法将桌子大小设置为屏幕大小，否则看起来很难看。

Answer 1

Here 是指向 PrimeNg 数据表文档的链接。您可以在此处找到几个可滚动表格选项的示例以及您需要应用的代码更改。

最简单的实现是使用

<p-table [columns]="cols" [value]="value" [scrollable]="true" scrollHeight="200px">

（您可能需要升级 PrimeNG 版本才能使用）。 这就是你要找的吗？

Answer 2

正如更新中提到的，您应该使用“[scrollable]="true" scrollHeight="200px""。根据需要设置滚动高度。

您还可以使用 position: sticky for you header 并设置所需的“顶部”。