I have a table that is grouped with multiple <tbody> elements, each one having one initial row with a <th> element that titles the group. I wan't these <th> :s to be sticky but I can't get safari to set the correct top position.

If I set top: 0px or any positive value on the <th> :s it works as expected in Firefox, Chrome and Edge but in safari I get 0px + the height of all above tbodies and caption. This results in all <th> :s getting stuck at the same time well below the top scroll position.

I can work around the problem by flattening the table, removing the <tbody> elements and putting all <tr> :s directly under the table. But that would complicate styling and it makes sense for accessibility to group the table in my case so I'd prefer if I didn't have to do that.

Do you have any ideas how can fix or work around this problem?

Expected (Chrome, Safari and Edge):

Safari 12: