html - 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
}