表格行将不包含具有位置的元素：绝对

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 完全失败，而其他浏览器仅包含“divs with table display”设置失败，见demo。

Answer 1

使用此 hack，因为 position: relative 在 <tr> 中被忽略（感谢 https://github.com/w3c/csswg-drafts/issues/1899）

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

Answer 2

引用spec：

'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 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 没有意义，而已经有一个。这只会是一场维护噩梦。

Answer 3

显然，唯一的纯 CSS 解决方案是在 tr 上设置 display:block（包括通过使用 float 隐式使用）。但是，这严重破坏了表格布局，对我来说效果不佳。

我决定硬着头皮将单元格的内容包装在div 中，正如这些答案中所建议的那样：

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

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

这似乎是我们能做的最好的事情，不会放弃表格标记或破坏它的呈现。

Answer 4

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

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