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 expected in Firefox. Not in IE, Edge and Chrome.
position: relative
on tbody
, tr
and even td
is ignored. And then first parent with position: relative
is used as "anchor" for absolute placing.
BTW: position: relative
do works when you set tbody
to display: block
. But then you can be in trouble with widths of table rows. Generally, the child elements no more precisely behave as table elements. Columns are gone.. But it is not part of this question.
My questions are:
Why is position: relative
ignored on tbody
, tr
td
?
Is there any reason for this behavior?
Is it a bug which should be fixed?
.example {
border: 1px solid #ccc;
position: relative;
background: #eee;
margin: 2em;
padding: 2em;
width: 50%;
}
.abs {
display: block;
position: absolute;
left: 100%;
top: 0;
}
table {
//border: 5px solid rgba(255,200,0,0.2);
border-collapse: collapse;
}
tbody {
border: 2px solid red;
position: relative;
}
td {
border: 1px solid lime;
padding: 1em;
}
.text--red {
color: red;
}
.text--gray {
color: gray;
}
<ul>
<li class="text--gray">Gray background is table wrapper with position relative.</li>
<li class="text--red">Redline is tbody with position relative.</li>
</ul>
<div class="example">
<table>
<tbody>
<tr>
<td>tbody1>tr1>td</td>
</tr>
<tr>
<td>tbody1>tr2>td</td>
</tr>
<tr class="abs abs--1">
<td>tbody1>tr3>td absolute position to tbody</td>
</tr>
</tbody>
<tbody>
<tr>
<td>tbody2>tr1>td</td>
</tr>
</tbody>
<tbody>
<tr>
<td>tbody3>tr1>td</td>
</tr>
<tr class="abs abs--2">
<td>tbody3>tr2>td absolute position to tbody</td>
</tr>
</tbody>
</table>
</div>
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 excepttable-column-group
andtable-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 ontable-*-group
,table-row
,table-column
,table-cell
, andtable-caption
elements is undefined.
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 settbody
todisplay: 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With