Question

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

Answer 1

来自w3schools.com

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

我觉得这部分经常被忽视。

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

Answer 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/

希望这有帮助。

鲍勃

Answer 3

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

更新

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

（我在Chrome和Firefox中测试）

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

3 个答案:

更新