CSS sticky z-index works only on TD not the text content

Question

I've tried all possible searches and this and got nowhere. I have a table with a thead tr set to position: sticky , however it does not work as desired - the text content of td goes over the sticky th , the background covers the elements but text goes over, like a sandwich;'d.

Demo

Git

I have tried using negative z-index , translateZ(0) and nothing seems to work..

Answer 1

I simply removed sticky and then I noticed it covered the sidebar. So keeping sticky and changing the z-index of thead to 200 and the aside tag to 300 worked for me. Let me know if I'm missing something.

thead {
position: sticky;
z-index: 200;
}

aside {
grid-area: aside;
display: flex;
flex-direction: column;
gap: 2rem;
height: 100%;
color: var(--theme-light);
background: linear-gradient(30deg, var(--theme-dark), var(--theme-dark_darker));
position: relative;
z-index: 300;
width: 100%;
height: 100%;
transition: width .2s ease-out;
}