Матовый стол с липким заголовком и горизонтальной вертикальной полосой прокрутки

У меня есть матовый стол с липким заголовком и вертикальной прокруткой страницы. Он работает нормально, пока я не добавлю больше столбцов динамически и не появится горизонтальная полоса прокрутки.

Прилипающие заголовки перестают работать.

есть ли способ заставить его работать?

См. Пример:

https://stackblitz.com/edit/angular-hdg9xh


material-design angular html angular-material angular-cdk
person Chandresh Mishra    schedule 09.06.2020    source источник
comment
Не уверен, чего вы хотите достичь - поэтому есть несколько решений. Например. вы можете полностью удалить оболочку - это приведет к переполнению таблицы по x и y до тела, а полосы прокрутки тела будут обрабатывать прокрутку данных. Или вы можете добавить свойство высоты в оболочку (например, .example-container), и тогда оболочка будет обрабатывать переполнения как по x, так и по y. В принципе, прочитайте, как липкий работает в сочетании с переполнением - есть много хороших статей по этому поводу, которые объяснят это намного лучше, чем я мог бы :)   -  person TotallyNewb    schedule 10.06.2020
comment
Установка контейнера фиксированной высоты решит проблему, но мой дизайн не позволяет мне сделать то же самое. Я хочу, чтобы заголовок был закреплен при прокрутке страницы в направлении Y и прокрутки таблицы в направлении x, как показано в stackblitz. ru / edit / angular-hdg9xh   -  person Chandresh Mishra    schedule 10.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете установить ширину и высоту контейнера div, обернутого вокруг mat-table. В таблице стилей вы можете применить что-то вроде этого:

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow: auto;
}

Пример: https://stackblitz.com/edit/angular-hdg9xh-uxkaeh

person Sovichea Cheth    schedule 05.02.2021