Angular - 带有粘性标题和水平滚动的 MatTable

时间:2021-01-22 11:49:09

标签: javascript angular

我在将粘性列与水平滚动合并时遇到问题。

您可以在此处找到示例(示例是 Angular 8,但我使用的是 Angular 10)。

https://stackblitz.com/edit/angular-u3st54-bqq6wk?file=app%2Ftable-sticky-header-example.html

基本示例具有粘性标题,因此如果您滚动整个页面,标题将固定在顶部,而行将滚动到其后面。 如果您使用水平页面滚动,标题将保持粘性。

enter image description here

不幸的是,我不能使用“页面水平滚动”,但我需要一个带有内部滚动的容器。 在示例中,从容器类中删除“-fake”。 如您所见,将出现一个内部水平滚动条,但标题不粘。

enter image description here

有没有办法同时保持这两种行为?

1 个答案:

答案 0 :(得分:0)

您必须确定 div 的高度才能使粘性开始工作。滚动屏幕时,不起作用,所以可用,需要在body中修复

.app-table-wrapper {
  overflow: auto;
  height: 400px; //for example
}