使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;">

 <tr><td>cell1</td><td>cell2</td></tr>

 <tr>

   <td>

     <div style="height: 100%; width: 100%; background-color:pink;"></div>

   </td>

   <td>long text long text long text long text long text long text</td>

 </tr>

</table>

在FireFox中，UPD还应将height=100%值设置为父TD元素

Answer 2

我只好一个设置假的高度与<tr>和高度：继承<td>s

tr有height: 1px（无论如何都会被忽略）

然后设置td height: inherit

然后将div设置为 height: 100%

这在IE edge和Chrome中对我有用：

<table style="width:200px;">

        <tr style="height: 1px;">

        <td style="height: inherit; border: 1px solid #000; width: 100px;">

              <div>

              Something big with multi lines and makes table bigger

              </div>

            </td>

            <td style="height: inherit; border: 1px solid #000; width: 100px;">

              <div style="background-color: red; height: 100%;">

              full-height div

              </div>

            </td>

        </tr>

    </table>