1

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) enter image description here 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.

doobsky
  • 21
  • 3
  • Although I don't belive it answers your question, there is some discussion of this in a similar question here: https://stackoverflow.com/questions/44001954/css-only-sticky-table-headers-in-chrome that might help you modify your implementation to one that works. If you can't get a suitable table style to apply sticky as you need, have you considered instead emulating a table with css grid layout? – Dave Pritlove May 07 '22 at 22:51

1 Answers1

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.

Martin Lévai
  • 179
  • 2
  • Thanks, setting `overflow-x:visible!important;` worked. I tried to apply it to something specified, but setting it to everything (*) seems to not break anything and works just like I wanted. Thank you. – doobsky May 08 '22 at 13:08