Html 如何使用CSS强制TD达到一定高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5286747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force a TD to be a certain height with CSS?
提问by Nathan Osman
Although somequestionssimilarto 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>
This will overlay the second image on the first one. However,the tdinsists on being 200pxtall even though there is only 100pxof content. Setting the td's height does nothing, which seems consistent with the answers to the other questions.
这会将第二个图像覆盖在第一个图像上。然而，在td坚持做200px高的，即使只有100px内容。设置td的高度没有任何作用，这似乎与其他问题的答案一致。
However, I do not have the option of embedding the contents in a DIVand setting the height to 100pxbecause the tdwill stillinsist on being 200pxtall.
不过，我没有在嵌入内容的选择DIV和高度设置100px，因为td将仍然坚持要200px高。
How can I tell the tdto just be 100pxtall?
我怎么能告诉td他们只是100px个子高？
Edit: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.
编辑：哦，使用绝对定位也是不可能的，因为页面中进行了大量的 DOM 操作，并且东西会四处移动 - 而绝对定位的东西不会。
Edit:jsFiddleexample can be found here.
回答by Pekka
This has nothing to do with the tdreally, but with the nature of position: relative. A relative element's space stays reserved in the document flow.
这与td真的无关，而是与 的性质有关position: relative。相关元素的空间保留在文档流中。
Get rid of the relative, and use position: absoluteon the first image instead.
去掉relative, 并position: absolute在第一个图像上使用。
Edit: Ijust saw your edit. Hmmm. Thinking.
编辑：我刚刚看到你的编辑。嗯。思维。
Two workaround ideas come to mind:
想到了两个解决方法：
Slap a
overflow: hiddenon thetdIf 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 aoverflow: hiddenon that.
巴掌
overflow: hidden上td如果这在所有浏览器中都不起作用或无效（我现在不是 100% 确定）将两个图像放入 a
<div height='100px;'>并在其overflow: hidden上放置 a 。
回答by c-smile
Declaring
申报
<td style="height: 100px; width:100px; overflow:hidden"> ...
should help you.
应该可以帮助你。
回答by jim31415
Overlay a second image in a table cell:
在表格单元格中叠加第二张图像：
<html>
<head>
<style>
table {border:1px solid #898989;}
td {border:1px solid #0090aa; overflow:hidden; height: 100px;}
td div {position:relative;}
.col1 {width:80px;}
.col1 {width:128px;}
.over {position:absolute; top:0; left:0; }
.under {}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">1</td>
<td>
<div>
<img class="under" src="blank_file.png" />
<img class="over" src="19.png" />
</div>
</td>
</tr>
</table>
</body>
</html>
回答by SpliFF
There is 200px of content because position:relativedoes not free up the space the object occupied before it was moved. You NEED to use position absolute and probably an inner DIV because things like overflow tend to cause issues on TD's.
有 200px 的内容，因为position:relative它没有释放对象在移动之前占用的空间。您需要使用绝对位置并且可能使用内部 DIV，因为诸如溢出之类的事情往往会导致 TD 出现问题。
回答by Saint Billios
Instead of using position relative on the second image to move it up and overlay, use negative margin.
不要使用第二张图像上的相对位置将其向上移动并叠加，而是使用负边距。
Change this.
改变这个。
<img src="..." style="height: 100px; position: relative; top: -100px;" />
Use:
用：
<img src="..." style="height: 100px; margin-top:-100px" />
That way, it'll actually move the image up and that TD will then only span 100px.
这样，它实际上会向上移动图像，然后 TD 将只跨越 100 像素。
