CSS position sticky - add space between sticky element and parent

Question

I've made the following layout for my application:

<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>

The block <div class="page"> is responsible for showing the content. This is also the area, which should be scrollable. Inside this container are often placed tables, which have sticky headers (by using position:sticky). Everything is working fine, but i can't find a way to add some space (margin/padding) between the sticky header of the table and the header of my layout without having trouble either with scrollbars or a visual bug.

I've made a little stackblitz, which shows my current implementation/tries:

Layout without margin or padding

Layout with margin (scrollbar get pushed away from most right position)

Layout with padding (adds transparent gap between sticky table header and layout header)

My Questions are:

• Is there a way to add space to my block <div class="page"> container, so that there will be a gap between my sticky table header and my layout header?

• Can i prevent my scrollbars to get pushed away from the right most position, when i use margin? (padding doesn't work, because the space is transparent, so that my sticky header "floats")

Thanks in advance for every tipp or hint!

Answer 1

Maybe a: 'border-top: solid 1rem #ccc;' and some padding top and bottom in 'th' will visually fix it