使 DIV 填充整个表格单元格

小编典典

使 DIV 填充整个表格单元格

all

我已经看到了这个问题并用谷歌搜索了一下，但到目前为止没有任何效果。我想现在是
2010 年（那些问题/答案很旧，而且，没有答案），我们有 CSS3！有没有办法让 div 使用 CSS 填充整个表格单元格的宽度和高度？

我不知道单元格的宽度和/或高度会提前是多少，并且将 div 的宽度和高度设置为 100% 不起作用。

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

阅读 74

2022-07-14

共1个答案

小编典典

以下代码适用于 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和heightto100%不起作用，这使我怀疑还有其他一些规则可以覆盖它。您是否检查了 Chrome 或
Firebug 中的计算样式以查看是否真的应用了宽度/高度规则？

编辑

我是多么愚蠢！是根据div文本调整大小，而不是根据td. 您可以通过制作来在 Chrome 上解决此问题div
display:inline-block，但它不适用于 IE。事实证明这更棘手......

2022-07-14