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>时通常可以正常工作，但在使用我在测试时发现的display:table-row时它仍会以这种方式运行，并且让我感到惊讶。

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

注意：我的实际标记更复杂，我尝试定位的元素可能出现在其行的任何表格单元格中的任何位置，这就是为什么我认为我需要{{1} }。

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

编辑：Firefox中的结果与Chrome和IE9中的结果不同（尚未测试过）。 FF完全失败，而其他浏览器只能在demo中看到包含“带表格显示的div”设置。

Answer 1

引用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＆lt; 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：我没有看过（并且不会评论）使用div的解决方案，因为我认为在编写那么多标记以获得table时没有意义已经一个。这只会是一场维护噩梦。

Answer 2

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

我决定咬住子弹并将单元格的内容包装在div中，如以下答案所示：

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

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

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

Answer 3

使用此技巧，因为https://github.com/w3c/csswg-drafts/issues/1899

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

Answer 4

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

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

表行不包含position：absolute的元素

4 个答案: