我有一张这样的桌子：

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

我想将每个按钮绝对定位在表格行的右上角，因此我使用了此CSS，期望<tr>中包含<button>：

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

但是，这些按钮都在同一位置彼此堆叠。通常使用<div>s 可以正常工作，除了display:table- row在测试时发现使用s时仍会以这种方式运行，这让我感到惊讶。

演示：http：//jsfiddle.net/QU2zT/1/

注意
：我的实际标记更加复杂，并且我尝试放置的元素可能会出现在该行的任何表单元格中的任何位置，这就是为什么我认为需要这样做的原因position:absolute。

1. 为什么会这样？
2. 如何在不更改标记的情况下使用CSS来解决此问题？

编辑
：Firefox中的结果与Chrome和IE9中的结果不同（未经过测试）。FF完全失败，而其他浏览器仅无法包含“具有表显示的div”设置，如演示中所示。