表格单元格中的绝对 div 样式答案

【问题标题】：div style absolute in a table cell表格单元格中的绝对 div 样式
【发布时间】：2019-01-25 06:25:47
【问题描述】：

我在表格单元格内有一个绝对位置和width:100% 的 div，宽度计算为窗口宽度而不是表格单元格宽度。表格单元格宽度也是可变的，所以我需要绝对 div 的宽度与表格单元格宽度相同。我该怎么做？

【问题讨论】：

你能告诉我们你的 html 和 css 到现在吗？

标签： html css css-tables

【解决方案1】：

来自 w3schools.com

绝对位置元素的定位相对于第一个具有非静态位置的父元素。

我认为这部分经常被忽视。

所以，尝试将 td 设置为 position:relative 看看是否能得到你想要的。

【讨论】：

【解决方案2】：

这就是我让它工作的方式：

<table border="1" class='rel'>
    <tr>
        <td><div class='abs'>row 1, cell 1</div></td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

* { margin: 0; padding: 0; }

.rel { 
    position: relative; 
}

.abs { 
    position: absolute;
    background-color: red;
    top: 1px;  /* offset because of table border */
    left: 1px;
}

请注意，相对样式应用于表格而不是 tr 或 td。当我将它应用于 td 时（我期望这是必要的）它在 Chrome 中不起作用。这是一个 jsFiddle 供您使用：

http://jsfiddle.net/bNweT/1/

希望这会有所帮助。

鲍勃

【讨论】：

这在 FireFox 上失败了......仍然看起来有点。
玩了一会儿之后，我无法让它在 FireFox 上工作，除非我在表格单元格中添加另一个 div 作为相对父容器。这是一个更新的 jsFiddle：jsfiddle.net/bNweT/2

【解决方案3】：

我相信这只能通过 JavaScript 来完成。

更新

我尝试了 width: auto;，但如果它具有绝对位置，则它不会占用 DOM 中父元素的宽度。

（我在 Chrome 和 Firefox 中测试）

【讨论】：