Table row won't contain elements with position:absolute

Answer 1

Use this hack as position: relative is ignored in <tr> (thanks to https://github.com/w3c/csswg-drafts/issues/1899)

tr {
  transform: scale(1);
}
td {
  position: absolute;
  top:0;
  right:0
}

Answer 2

http://jsfiddle.net/QU2zT/23/

table, tr, td{
    width: 100%;
}
tr {
 background:#cde;
 float: left;
 clear: both;
}

Answer 3

Apparently, the only pure CSS solution is to set display:block on the tr (including implicitly via use of float). However, this severely breaks table layouts and didn't work out very well for me.

I decided to bite the bullet and wrap the content of the cell in a div, as suggested in these answers:

• https://stackoverflow.com/a/8312358/398242
• https://stackoverflow.com/a/7629567/398242

<tr>
    <td>
        <div style="position:relative">
            <button style="position:absolute"></button>
        </div>
    </td>
</tr>

This still has a disadvantage: since our position:relative element must be inside a table cell, it only works in the last cell of the table row (when the goal is to have the absolute element positioned relative to the entire row, in the top right corner). This also doesn't seem to position the element correctly as seen here: http://jsfiddle.net/QU2zT/25/

This seems to be the best we can do, without abandoning table markup or breaking it's rendering.

Answer 4

To quote from the spec:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

EDIT:

The only solution that I can see involves using :last-child (ie. no IE < 9) and good old vertical-align and text-align:

td:last-child {
    vertical-align: top;
    text-align: right;
    padding: 0;
    margin: 0;
}

Here's a working demo: http://jsfiddle.net/QU2zT/15/

I would also like to add that if you really don't want to change your markup and need to support IE you can use this solution combined with JavaScript.

PS: I haven't looked at (and won't comment on) the solution using divs as I see no point in writing that much markup to obtain a table, when there is already one. It will only be a maintenance nightmare.