首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使DIV填充整个表格单元格

使DIV填充整个表格单元格
EN

Stack Overflow用户
提问于 2010-07-10 02:37:13
回答 18查看 244.5K关注 0票数 182

我见过this questiongoogled a bit,但到目前为止还没有起作用。我认为现在已经是2010年了(这些问题/答案都很老了,而且,嗯,还没有答案),我们有了CSS3!有没有办法让div用CSS填充整个表单元格的宽度和高度?

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

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

EN

回答 18

Stack Overflow用户

回答已采纳

发布于 2010-07-10 03:17:44

以下代码适用于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>

您在最初的问题中说,将widthheight设置为100%不起作用,这让我怀疑是否有其他规则覆盖了它。你是否检查了Chrome或Firebug中的计算样式,以查看是否真的应用了宽度/高度规则?

编辑

我是多么愚蠢啊!div根据文本而不是td调整大小。你可以通过制作div display:inline-block在Chrome上修复这个问题,但它在IE上不起作用。事实证明这更棘手..。

票数 48
EN

Stack Overflow用户

发布于 2013-01-05 02:51:12

如果您希望表格单元格内有100%div的原因是能够使背景颜色扩展到整个高度,但单元格之间仍有间距,则可以为<td>本身提供背景色,并使用CSS边框间距属性来创建单元格之间的边距。

但是,如果你真的需要一个100%高度的div,那么就像这里的其他人提到的那样,你需要给<table>分配一个固定的高度,或者使用Javascript。

票数 15
EN

Stack Overflow用户

发布于 2018-04-12 21:18:28

如果<table> <tr> <td> <div>都设置了height: 100%;,那么div将填充所有浏览器中的动态单元格高度。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3215553

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档