Html 如何在桌子上强制最小高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8822082/
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 min-height on table
提问by markzzz
I have thiscode :
我有这个代码：
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
</table>
As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.
如您所见，第一个 tr/td 应该是高度 60px ( min-height:60px) 但实际上并非如此。
For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).
出于多种原因，我不能直接使用高度（此代码已在时事通讯中格式化为后台办公系统）。
So, how can I take the whole height on the td trought min-height?
那么，我怎样才能在 td trought min-height 上获取整个高度？
Also, tried putting min-height:60px;on tr, but nothing change...
此外，尝试穿上min-height:60px;tr，但没有任何改变......
回答by Pekka
min-heightdoesn't work for table elements:
min-height不适用于表格元素：
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
在 CSS 2.1 中，'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。
I can only assume this applies to tdand tras well.
我只能假设这适用于td并且tr也适用。
What should always work is wrapping the content in a div, and applying min-heightto that, as shown in this JSFiddle:
应该始终有效的是将内容包装在一个 div 中，并对其min-height进行应用，如此 JSFiddle所示：
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
<div style="min-height: 60px; background-color: green">
This is my text that I need in 2 lines
</div>
</td>
Edit:You say this doesn't work with Outlook.
编辑：您说这不适用于 Outlook。
Alternative idea: Place a 60 px tall image in the td, and make it float: left:
另一种想法：在 中放置一个 60 像素高的图像 td，并使其float: left：
<td>
<img src="..." style="float: left">
</td>
回答by John
Use <td height="60">not CSS height or min-height
<td height="60">不使用CSS height 或 min-height
For HTML email set your table cell as <td height="60">and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.
对于 HTML 电子邮件，将表格单元格设置为<td height="60">，它会将其视为最小高度。如果您的内容超过 60 像素，它将相应地扩展。
回答by Diodeus - James MacFarlane
Put a DIV in the cell, style the DIV instead.
在单元格中放置一个 DIV，改为设置 DIV 的样式。
回答by dg90
Min-height doesn't works on tables.
Min-height 不适用于桌子。
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height& max-height
有时将元素的高度限制在某个范围内很有用。两个属性提供此功能：min-height&max-height
But these can't be used on non-replaced inline elements, table columns, and column groups.
但是这些不能用于不可替换的内联元素、表格列和列组。
回答by Davton
You can't set min-heightand min-width, but you can use some CSS3 for achievements this same effect.
你不能设置min-height和min-width，但你可以使用一些 CSS3 来实现同样的效果。
HTML:
HTML：
<div class="default-table">
<table>
<tbody>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jone</td>
<td>Polanski</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
CSS:
CSS：
.default-table table {
border-collapse: collapse;
}
.default-table table td {
padding: 0;
}
.default-table tr:before {
width: 0px;
content: '';
float: left;
overflow: hidden;
height: 28px;
font-size: 0;
}
.default-table {
overflow:hidden;
}
but if u having collapse or padding in td. You must give for .default-table table minus margin-left.
但是如果你在 td 中有折叠或填充。您必须为 .default-table 表减去 margin-left。
回答by Az.Youness
HTML :
HTML :
<table></table>
CSS :
CSS :
table{
height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
min-height:100vh;
}
That's how I always resolve this problem ...
这就是我总是解决这个问题的方式......
回答by Dave Hogan
Add display block
添加显示块
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
回答by Alex W
Here's a solution that works in Outlook(tested) and other e-mail clients:
这是一个适用于 Outlook（已测试）和其他电子邮件客户端的解决方案：
<td style="mso-line-height-rule:exactly;line-height:300px;"> </td>
This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.
这比使用图像更干净，图像可能会对您的垃圾邮件分数产生负面影响，并且执行完全相同的操作。
If you have other content in the <td>that you don't want to have that line height, you can just wrap the non-breaking space in a <span>and set the line-heighton that tag:
如果您<td>不想拥有该行高的其他内容，您可以将不间断空格包裹在 a 中<span>并line-height在该标签上设置：
<td><span style="mso-line-height-rule:exactly;line-height:300px"> </span>**Other content without 300px line-height here**</td>
The reason heightor min-heightworks on <div>tags and not <td>is because <td>are set to display:table-celland do not respect heightthe same way that display:block(<div>) elements do.
原因heightormin-height对<div>标签起作用而不是<td>因为<td>被设置为display:table-cell并且不尊重( ) 元素所做height的相同方式。display:block<div>
回答by alamnaryab
I have resolved this issue by adding display:block;to its style as
我已经通过添加display:block;它的样式解决了这个问题
<td style="display:block; min-height:200px;">
回答by Pavel Plachky
Here is a solution that does not depend on the height in pixels. It works in all email clients:
这是一个不依赖于像素高度的解决方案。它适用于所有电子邮件客户端：
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
<td style="font-family:Arial;font-size:12px;line-height:14px;">
<br/><br/>
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
The solution works by adding a zero-width column with two lines to the right of the first one. It uses the  character, which is a non-breaking zero-width space.
该解决方案的工作原理是在第一行的右侧添加一个带有两行的零宽度列。它使用 字符，这是一个不间断的零宽度空间。
