Incompatibility between tables with sticky table header and page header

[migrund]

I am currently building a frontend with the db-ui core and found following issue:

When using a standard <header class="rea-header"> in combination with a <table class="cmp-table" data-sticky="header"> element, the sticky-header of the table gets lost behind the page header of the webpage.

While researching for a fix to that topic I found a site telling me, that position:sticky should not be used on a <thead> element and instead on the <th> element in the table. (I sadly don't have the link anymore)

I also found a workaround that works for me, but probably isn't the best way, as it has a fixed top definition in my CSS file and I also needed to set a box-shadow for getting a (neat) border between the sticky header and other content.
Here is the workaround in CSS:

.cmp-table[data-sticky=header] th {
    background: var(--db-color-white);
    position: sticky;
    top: 70px;
    box-shadow: inset 0 -1px 0px 0px rgba(0, 0, 0, 0.4);
}

With that workaround in place there was also another problem resulting from the backdrop-filter of the "zebra" tables.
It somehow overlapped and therefore then blurred parts of the table header in some instances.
I fixed that by using this:

.cmp-table[data-rows=zebra] tbody tr:nth-child(odd) {
    backdrop-filter: none;
}

I hope this can be fixed in the db-ui/core so we do not need to have that workaround in place or probably more likely won't use data-sticky="header" for our tables,