如何用CSS强制TD达到一定的高度？ [英] How to force a TD to be a certain height with CSS?

问题描述

尽管某些 问题 类似，这个有点不同。

Although some questions similar to this one have been asked before, this one is a little different.

我的表格看起来像这样：

I have a table that looks a little something like this:

<table>
 <tr>
  <td style="height: 100px;">
   <img src="..." style="height: 100px;" />
   <img src="..." style="height: 100px; position: relative; top: -100px;" />
  </td>
 </tr>
</table>

这将覆盖第一张图像。 然而， td 坚持 200px tall 即使只有 100px 内容。设置 td 的高度什么都不做，这似乎与其他问题的答案一致。

This will overlay the second image on the first one. However, the td insists on being 200px tall even though there is only 100px of content. Setting the td's height does nothing, which seems consistent with the answers to the other questions.

但是，我没有选择将内容嵌入 DIV 并将高度设置为 100px ，因为 td 仍然坚持 200px 高。

However, I do not have the option of embedding the contents in a DIV and setting the height to 100px because the td will still insist on being 200px tall.

如何告诉 td 只是 100px 高？

How can I tell the td to just be 100px tall?

编辑：哦，使用绝对定位也是不可能的，因为很多DOM操作在页面中继续进行，并且东西被移动 - 而绝对定位的东西则没有。

Oh, and using absolute positioning is out of the question too because a lot of DOM manipulation goes on in the page and stuff gets moved around - whereas the absolutely positioned stuff does not.

编辑： jsFiddle 示例可以在这里找到。

推荐答案

这没什么了o确实使用 td ，但具有位置的性质：相对。相对元素的空间在文档流中保留。

This has nothing to do with the td really, but with the nature of position: relative. A relative element's space stays reserved in the document flow.

摆脱 relative ，并使用<$ c取而代之的是第一张图片上的$ c> position：absolute 。

编辑：我刚看到你的编辑。嗯。思考。

I just saw your edit. Hmmm. Thinking.

想到两个解决方法的想法：

Two workaround ideas come to mind:

• Slap一个溢出：隐藏在 td

如果这在所有浏览器中都不起作用或无效（我现在不是100％确定）将这两个图像放入< div height ='100px;'> 并在其上放一个 overflow：hidden 。

If that doesn't work in all browsers or isn't valid (I'm not 100% sure right now) Put the two images into a <div height='100px;'> and put a overflow: hidden on that.

这篇关于如何用CSS强制TD达到一定的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！