Я сделал следующий макет для своего приложения:
<div class="app-container">
<header>header </header>
<main>
<mat-sidenav-container>
<mat-sidenav [mode]="'side'" #sidenav>sidenav sidenav sidenav</mat-sidenav>
<mat-sidenav-content>
<div class="page">
<p><button mat-button (click)="sidenav.toggle()">Open Sidenav</button></p>
<table-sticky-header-example>loading</table-sticky-header-example>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</main>
<footer> footer </footer>
</div>
Блок <div class="page">
отвечает за показ содержимого. Это также область, которую следует прокручивать. Внутри этого контейнера часто размещаются таблицы, которые имеют липкие заголовки (используя position:sticky
). Все работает нормально, но я не могу найти способ добавить пробел (margin / padding) между липким заголовком таблицы и заголовком моего макета, не испытывая проблем ни с полосами прокрутки, ни с визуальной ошибкой.
Я сделал небольшой стек, который показывает мою текущую реализацию / попытки:
Компоновка без полей и отступов
Макет с полем (полоса прокрутки отодвинута от самого правого положения)
Макет с отступом (добавляет прозрачный пробел между липким заголовком таблицы и заголовком макета)
Мои вопросы:
Есть ли способ добавить место в моем блоке <div class="page">
контейнера, чтобы между моим липким заголовком таблицы и моим заголовком макета был промежуток?
Могу ли я помешать моим полосам прокрутки сдвинуться в крайнее правое положение при использовании поля? (заполнение не работает, потому что пространство прозрачно, так что мой липкий заголовок "плавает")
Заранее благодарим за каждый совет или подсказку!