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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一张这样的桌子：

<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在测试时发现使用s时仍会以这种方式运行，这让我感到惊讶。

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

：我的实际标记更加复杂，并且我尝试放置的元素可能会出现在该行的任何表单元格中的任何位置，这就是为什么我认为需要这样做的原因position:absolute。

  1. 为什么会这样？

  2. 如何在不更改标记的情况下使用CSS来解决此问题？

：Firefox中的结果与Chrome和IE9中的结果不同（未经过测试）。FF完全失败，而其他浏览器仅无法包含“具有表显示的div”设置，如演示中所示。

回答：

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

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

这仍然有一个缺点：由于我们的position:relative元素必须在表格单元格内，因此它仅在表格行的最后一个单元格中起作用（当目标是将绝对元素相对于整个行放置在右上角时）

。

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

以上是 表格行将不包含具有position：absolute的元素 的全部内容， 来源链接： utcz.com/qa/410279.html

回到顶部