将 td 中存在的 div 扩展到更远而不影响父级

Question

我正在寻找一种在 td 中显示 div 而不会实际影响<td>尺寸的方法。 将 position 设置为固定/绝对不允许 div 与 td 一起滚动。

为问题添加代码片段

 td { height: 100px; width: 100px; background: red; }

 <table> <tr> <td> <div style="width: 100px; height: 150px; background: yellow;"> This should not affect parent td height </div> </td> </tr> <tr> <td> Top 50px of this should be covered by yellow div </td> </tr> </table>

Answer 1

黄色 div 需要绝对定位，以免影响其父元素的高度。

但是，对于 position，它与父元素相关，您需要将该父元素自身定位。

在这个片段中，我将第二个 td 着色为绿色，这样我们就可以将它与第一个区分开来，并且还给绝对定位的 div 一个 90px 的宽度，这样我们就可以知道它相对于两个 td 的位置。

 <table> <tr> <td style="height: 100px; width: 100px; background: red; position: relative;"> <div style="width: 90px; height: 150px; background: yellow; position: absolute; top: 0; left: 0;"> This should not affect parent td height </div> </td> </tr> <tr> <td style="width: 100px; height: 100px; background: green;"> Top 50px of this should be covered by yellow div </td> </tr> </table>