表行不包含position:absolute的元素

Question

我有这样一张桌子:

<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在测试时我发现使用它时仍会表现这种方式,这对我来说是一个惊喜.

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

注意:我的实际标记更复杂,我试图定位的元素可能出现在它行的任何表格单元格中的任何位置,这就是我认为我需要的原因position:absolute.

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

编辑:Firefox中的结果与Chrome和IE9中的结果不同(尚未测试).FF是一个彻底的失败,而其他浏览器只能在演示中看到包含"带表格显示的div"设置.

Answer 1

引用规范:

'position:relative'对table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption元素的影响未定义.

编辑:

我能看到的唯一解决方案是使用:last-child(即没有IE <9)和旧的vertical-align和text-align:

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

这是一个有效的演示:http://jsfiddle.net/QU2zT/15/

我还想补充一点,如果您真的不想更改标记并需要支持IE,那么您可以将此解决方案与JavaScript结合使用.

PS:我没有看过(并且不会评论)使用divs 的解决方案,因为我认为在编写那么多标记table时没有必要获得a ,当已经存在时.这只会是一场维护噩梦.

Answer 2

感谢https://github.com/w3c/csswg-drafts/issues/1899，将这种技巧用作相对位置在tr中被忽略

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

Answer 3

显然,只有纯CSS的解决方案是设置display:block在tr(包括隐式地通过使用的float).然而,这严重打破了表格布局,对我来说效果不佳.

我决定咬紧牙关并将细胞内容包装成一个div,如这些答案所示:

• /sf/answers/581865091/
• /sf/answers/534069721/

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

这仍然有一个缺点:因为我们的position:relative元素必须在表格单元格中,它只能在表格行的最后一个单元格中工作(当目标是相对于整个行定位绝对元素时,在右上角) .这也似乎没有正确定位元素如下所示:http://jsfiddle.net/QU2zT/25/

这似乎是我们能做的最好的事情,而不会放弃表格标记或破坏它的渲染.