使DIV填充整个表格单元格

Question

我已经看过这个问题并在Google上搜索了一下，但到目前为止没有任何效果。我认为现在是2010年（这些问题/答案很旧，而且还没有答案），我们有了CSS3！有什么方法可以使用CSS使div填充整个表格单元格的宽度和高度吗？

我不知道单元格的宽度和/或高度会提前多少，并且将div的宽度和高度设置为100％无效。

另外，我需要div的原因是因为我需要将某些元素绝对定位在单元格之外，并且position: relative不适用于tds，因此需要包装div。

Answer 1

表格单元格中的div height = 100％仅在表格本身具有height属性时才有效。<table border="1" style="height:300px; width: 100px;">&nbsp;<tr><td>cell1</td><td>cell2</td></tr>&nbsp;<tr>&nbsp; &nbsp;<td>&nbsp; &nbsp; &nbsp;<div style="height: 100%; width: 100%; background-color:pink;"></div>&nbsp; &nbsp;</td>&nbsp; &nbsp;<td>long text long text long text long text long text long text</td>&nbsp;</tr></table>在FireFox中，UPD还应将height=100%值设置为父TD元素

Answer 2

我只好一个设置假的高度与<tr>和高度：继承<td>str有height: 1px（无论如何都会被忽略）然后设置td height: inherit然后将div设置为 height: 100%这在IE edge和Chrome中对我有用：<table style="width:200px;">&nbsp; &nbsp; &nbsp; &nbsp; <tr style="height: 1px;">&nbsp; &nbsp; &nbsp; &nbsp; <td style="height: inherit; border: 1px solid #000; width: 100px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Something big with multi lines and makes table bigger&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="height: inherit; border: 1px solid #000; width: 100px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="background-color: red; height: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; full-height div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>