Html 表格行将不包含具有 position:absolute 的元素

Table row won't contain elements with position:absolute

提问by Wesley Murch

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

我想将每个按钮绝对定位在表格行的右上角，所以我使用了这个 CSS，期望<tr>包含<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-rowwhich I found out while testing, and came as a surprise to me.

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

Demo: http://jsfiddle.net/QU2zT/1/

演示：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.

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

1. Why does this happen?
2. How can I work around this using CSS, without altering the markup?

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

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.

编辑：Firefox 中的结果与 Chrome 和 IE9 中的结果不同（尚未对此进行测试）。FF 完全失败，而其他浏览器仅无法包含演示中看到的“带表格显示的 div”设置。

采纳答案by Wesley Murch

Apparently, the only pure CSS solution is to set display:blockon the tr(including implicitly via use of float). However, this severely breaks table layouts and didn't work out very well for me.

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

I decided to bite the bullet and wrap the content of the cell in a div, as suggested in these answers:

我决定硬着头皮将单元格的内容包含在 a 中div，如以下答案中所建议的：

• https://stackoverflow.com/a/8312358/398242
• https://stackoverflow.com/a/7629567/398242

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

This still has a disadvantage: since our position:relativeelement must be inside a table cell, it only works in the last cell of the table row (when the goal is to have the absolute element positioned relative to the entire row, in the top right corner). This also doesn't seem to position the element correctly as seen here: http://jsfiddle.net/QU2zT/25/

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

This seems to be the best we can do, without abandoning table markup or breaking it's rendering.

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

回答by Bharat Parmar

Use this hack as position: relativeis ignored in <tr>(thanks to https://github.com/w3c/csswg-drafts/issues/1899)

使用这个 hackposition: relative被忽略<tr>（感谢https://github.com/w3c/csswg-drafts/issues/1899）

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

回答by deviousdodo

To quote from the spec:

引用规范：

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

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

EDIT:

编辑：

The only solution that I can see involves using :last-child(ie. no IE < 9) and good old vertical-alignand text-align:

我能看到的唯一解决方案涉及使用:last-child（即没有 IE < 9）和旧的vertical-align和text-align：

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

Here's a working demo: http://jsfiddle.net/QU2zT/15/

这是一个工作演示：http: //jsfiddle.net/QU2zT/15/

I would also like to add that if you reallydon't want to change your markup and need to support IE you can use this solution combined with JavaScript.

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

PS: I haven't looked at (and won't comment on) the solution using divs as I see no point in writing that much markup to obtain a table, when there is already one. It will only be a maintenance nightmare.

PS：我没有看过（也不会评论）使用divs的解决方案，因为我认为写那么多标记来获得 a 没有意义table，当已经有一个时。这只会是维护的噩梦。

回答by Joonas

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

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

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