Bug in most browsers?: Ignoring position relative on 'tbody', 'tr' and 'td'?

Question

When you try to absolutely position element to tbody, tr and even td you find out it does not work in most browsers. It works as expec

Answer 1

What MDN says is accurate as of CSS2. For many years the effect of position: relative on internal table boxes was undefined (§9.3.1), and implementations were far from interoperable.

This changed only recently in css-position-3, which now defines the effects as follows:

The effect of position: relative on table elements is defined as follows:

• table-row-group, table-header-group, table-footer-group and table-row offset relative to its normal position within the table. If table-cells span multiple rows, only the cells originating in the relative positioned row is offset.

• table-column-group, table-column do not offset the respective column and has no visual affect when position: relative is applied.

• table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multiple columns or rows the full spanned cell is offset.

However implementations are still all over the place, and the reason for that is because implementations of the CSS table model remain chaotic, unpredictable, not completely interoperable and full of historical baggage that no one wants to touch with a 10-foot pole. You can tell by a skimming through the css-tables-3 spec and the CSSWG's GitHub issues for that spec.

Having said that, browser vendors are slowly and cautiously addressing tangential issues like positioning of internal table boxes like this bit by bit. Just don't expect rapid progress.

BTW: position: relative do works when you set tbody to display: block.

Yes, because by doing so the tbody stops functioning like a tbody and starts acting like a div, and you completely destroy the CSS structure of your table.