Question

我正在尝试制作一个html邮件，所以我需要使用内联CSS。问题是我无法弄清楚为什么我设置的单元格高度不按我的意图显示。我设置了细胞的％高度，就像我想的那样，但结果并不像我预期的那样。

代码是这样的，你可以看到结果与我的意图不一样，因为我为标题设置了15％，但结果显然不是15％而且无论值是什么都不会改变结果。同样的事情发生在另一个td：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset="UTF-8">
  <title></title>
  </head>
  <body>
      <table style="table-layout:fixed; width:56%; height:100%;"  border="1" bordercolor=black align=center>
             <tr>
                <th colspan="2" style="height:15%; width:100%;" >
                <a href="http://www/">
                  <img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%"  alt="Header"/>  </a>
                </th>
             </tr>
             <tr>
                 <td  style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%;      width:50%;"  >
                   <img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%"  alt="Patrik" />
                 </td>
                 <td style="border-left-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
                   <img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%"  alt="Alberta" /> 
                 </td>
             </tr>
             
             <tr>
                <td colspan="2" style="height:60%; width:100%;" >
                   <img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>  
                </td>
             </tr>
             <tr>
                <th colspan="2" style="height:15%; width:100%;" >
                   <img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>  
                </th>
             </tr>          
      </table>   
  </body>
</html>

我希望你能帮助我。

Answer 1

我无法正确理解您的问题，

将类分配给td并设置高度

<td class="classname">
</td>

.className{
height:20%;
background:red;
}

尝试以下代码

如果您需要任何帮助，请与我们联系。

<html>
<head>
<style>
html,body{ 
	height:100%;
	margin:0 auto;
}

table{
	table-layout:fixed; 
	width:56%; 
	height:100%; 
	border:1px solid #000;
	text-align:center;
	margin:0 auto;
}

table th{
	height:15%;
	width:100%;

}
.className{
height:20%;
background:red;
}

td{
	height:50%;
	border:1px solid #000;
	background:#000;
	width:100%; 
}
</style>
</head>
<body>
	<table >
	<tr>
		<th colspan="2" >
		<a href="http://www/"> <img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%"  alt="Header"/>  </a>
		</th>
	</tr>
	<tr>
		<td >
			<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%"  alt="Patrik" />
		</td>
		<td >
			<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%"  alt="Alberta" /> 
		</td>
	</tr>

	<tr>
		<td colspan="2" class="className" >
			<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>  
		</td>
	</tr>
	<tr>
		<th colspan="2" >
			<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>  
		</th>
	</tr>          
	</table>   
</body>
</html>

Answer 2

以百分比定义高度不适用于td / div，特别是对于邮件程序，只需要指定像素值。

Answer 3

要使图像拉伸到与包含框相同的高度和宽度，只需添加100％宽度和高度等于它所在的行：

http://jsfiddle.net/j2bcc24o/4/

如果您只想要宽度，请转到：

http://jsfiddle.net/j2bcc24o/3/

<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;">
    <img src="image.png" width="100%" height="10%" alt="Patrik" />
</td>

并且不要忘记将html和body设置为100％的高度和宽度以及0填充和边距：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

HTML邮件 - 无法修复td高度

3 个答案: