Table row won't contain elements with position:absolute

Question

I have a table like this:

<table cellspacing="0">
    <tr>
        <td>Row 1</td>
        <td><button>Button 1</button></td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td><button>Button 2</button></td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td><button>Button 3</button></td>
    </tr>
</table>

I wanted to absolutely position each button at the top right of the table row, so I used this CSS, expecting the <tr> to contain the <button>:

tr {
    position:relative;
}
button {
   position:absolute;
   top:0;
   right:0;   
}

However, the buttons are all stacked on top of each other in the same place. It normally works fine using <div>s, except it will still behave this way when using display:table-row which I found out while testing, and came as a surprise to me.

Demo: http://jsfiddle.net/QU2zT/1/

Note: My actual markup is more complex, and the element I'm trying to position might appear anywhere in any table cell in it's row, which is why I believe I need position:absolute.

1. Why does this happen?
2. How can I work around this using CSS, without altering the markup?

EDIT: The results are different in Firefox than they are in Chrome and IE9 (haven't tested beyond that). FF is a complete failure, while the other browsers only fail to contain the "divs with table display" setup, seen in the demo.

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

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.

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

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

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