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

Posted 2023-03-06

【中文标题】表格行将不包含具有位置的元素：绝对

【英文标题】：Table row won't contain elements with position:absolute

【发布时间】：2012-01-20 01:33:36

【问题描述】：

我有一张这样的桌子：

<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 的原因。

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

编辑：Firefox 中的结果与 Chrome 和 IE9 中的结果不同（除此之外还没有测试过）。 FF 完全失败，而其他浏览器仅包含“divs with table display”设置失败，见demo。

【问题讨论】：

在 Chrome 中为我工作，您使用的是哪种浏览器？

使用 FF8 问题是最严重的，但其他浏览器似乎也有使用模拟表的各种 display 设置的 <div> 设置问题（演示中的第二个示例），请参阅编辑。

检查this SO question。基本上，将display:block; 添加到单元格或行中就可以了，但它会弄乱整个表格样式。您可以尝试在单元格内添加一个元素并为其指定相对位置。更多的标记，更少的头痛：P

***.com/questions/7629326/…

@thirtydot：包装技巧似乎在任何浏览器中都不起作用：jsfiddle.net/QU2zT/18

【参考方案1】：

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

tr 
  transform: scale(1);

td 
  position: absolute;
  top:0;
  right:0

【讨论】：

是的，这是一个 hack，所以它在不同浏览器上的行为可能会有所不同

这是 chromium 的错误报告，供任何想要跟踪进度的人使用：bugs.chromium.org/p/chromium/issues/detail?id=417223 虽然考虑到上面链接的 csswg 线程中的对话，如果它仍然被认为是错误。

更新：position: relative 适用于 Firefox (>88)，transform 在 Chrome 中的“hack”很快将不再是 longer necessary，但不幸的是它们都不适用于 Safari。跨度>

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

【讨论】：

+1 链接到规范；这很有趣 - 未定义的行为。在demo 中，我实际上有table, tr, td position:relative;，甚至table 都不会包含它（必须在正文中添加填充以注意）。你能做一个工作演示或有其他解决方案吗？

<div> 元素和display:table-* 显示这个问题仍然是个谜，不是吗？还是规范的这一部分实际上包括了这些？

@Madmartigan 我已经用（有点）解决方案更新了我的答案。正如我所说，我没有看过div 实现，但如果你使用display: table-*，所有规则都适用于普通表（但可能有一些怪癖——这就是我不喜欢走这条路的原因） .

您发布的解决方案仍然依赖于标记和元素放置，不幸的是，这对我来说行不通（这意味着编辑模板文件需要大量工作......）：jsfiddle.net/QU2zT/24 div 只是一个实验，但结果出乎意料，所以我把它包括在内。我想我必须做出一些让步，再次感谢。

是的，但你应该在你的问题中提到这一点:) 我的回答没有改变任何标记（如你所要求的那样），但我不知道你在单元格中有任何其他内容.. . 关于元素放置，这可以用 Javascript 解决。

【参考方案3】：

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

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

https://***.com/a/8312358/398242 https://***.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/

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

【参考方案4】：

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

table, tr, td
    width: 100%;

tr 
 background:#cde;
 float: left;
 clear: both;

【讨论】：

感谢您的想法，它似乎对 FF 有所帮助，但正如 cmets 中提到的人渣 - 它弄乱了行的显示方式。查看block VS table-row 的区别

即使添加了width:100%;，副作用仍然相同。这实际上是我一开始尝试的，但它确实破坏了布局，没有表格单元格占据整个行宽。 +1，因为这在技术上似乎可行，但我认为我不能真正使用这种方法。

哇，这很奇怪，它似乎有效。我必须在早上检查一下，看看td width:100% 造成了什么样的麻烦，我晚上没油了（这里是凌晨 5 点）。再次感谢。

是的，这破坏了布局非常糟糕。感谢您的帮助，我想我必须使用包装器 div 解决方案，因为它不能用 CSS 完成。

@Madmartigan 我不会说它不能完成，还没有。就像现在它似乎工作，至少我期望它如何工作。它是如何破坏布局的？