Stylish style to float the table header after it's been scrolled on top

Question

I'm trying to write myself a little Stylish style for one page, for easier reading.
The page in question is https://satisfactory.fandom.com/wiki/Hard_Drive .
What I want to achieve is to the top row of this table (with "alternate name", "product" and so on) to behave similar to the top wikia navbar - I want it to be on it's place, until it's been scrolled past down, then to stay at the top - sort of as freezing a row in a spreadsheet.

The position: sticky; should do what I want, but nothing changes. I've tried with background-color to see if I'm targeting the proper element, and the background color changed.

Here's how I'm trying to do it

table#alternateRecipesTable th {
    position:sticky!important;
    top: 0px!important;
}

I'm using firefox 100 with stylus 1.5.21.

Thank you.

Answer 1

Your plan to set the position: sticky CSS property is correct. However, to work this as expected, there can't be a parent element with overflow: hidden .

If you set the position: sticky to your head cells of the table, you also need to check every parent element and unset the overflow: hidden property, otherwise it will not work.