Overlay on top of tbody

Question

I am trying to create a loading overlay on top of tbody (and only tbody). My current solution is to add tr as the last element of tbody and set

Answer 1

IMHO: In browsers which support CSS3 position:relative on table elements should work. As you have rightly revealed: it works only in Firefox. Not in IE, Edge and Chrome.

Sources:

https://www.w3.org/TR/css-position-3/#valdef-position-relative

https://www.w3.org/TR/css-position-3/#property-index

Property name: position Applies to: all elements except table-column-group and table-column

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative About 'stacking context' but that is not the subject of this question

This value (position: relative) creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

Related questions:

1. Overlay on top of tbody
2. Bug in most browsers?: Ignoring position relative on 'tbody', 'tr' and 'td'?