使DIV填充整个表格单元格

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

以下代码适用于IE 8，IE 8的IE 7兼容模式和Chrome（未经其他地方测试）：

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

你在你原来的问题时说，制定width并height以100%没有工作，虽然，这使我怀疑，有一些规则覆盖它。您是否在Chrome或Firebug中检查了计算样式，以查看宽度/高度规则是否真正应用了？

回答：

我真愚蠢！的div大小是根据文字确定的，而不是td。您可以通过制作来在Chrome上解决此问题divdisplay:inline-block，但在IE上则无法使用。事实证明这比较棘手…

以上是 使DIV填充整个表格单元格 的全部内容， 来源链接： utcz.com/qa/401954.html

回到顶部