我正在尝试为电子邮件创建一个包含三个表的嵌入式表格。我之所以使用表格是因为我希望当电子邮件在较小的屏幕上呈现时，表格会叠加在另一个表格之上。并非所有的电子邮件客户端都能很好地阅读CSS，所以我正在寻找内联HTML编码，而不是CSS解决方案。
内容表总共为600px宽。其中，表1为299px宽，表2为2px宽，表3为299px宽。
我遇到的第一个挑战是表2中的行高不是表1和表3的100％。我通过在内容表和表2中将行高更改为100％来解决这个问题。这似乎解决了表2的行高，但随后表3被推下。
这是jsfiddle：https://jsfiddle.net/robertschlotzhauer/snk6pjb9/
<table border="0" cellpadding="0" cellspacing="0" width="600" height="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="299">
<tbody>
<tr>
<td style="padding:10px 15px 10px 15px;line-height:18px">
<div align="center">
<font style="font-family:Arial;font-size:16px;">
<b>
Text
</b>
</font>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#8C231C" border="0" cellpadding="0" cellspacing="0" height="100%">
<tbody>
<tr>
<td style="line-height:2px" bgcolor="#8C231C" width="2px">
<font style="font-size:2px">
</font>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="299" valign="top" align="right">
<tbody>
<tr>
<td style="padding:10px 20px 0px 20px;line-height:18px">
<div align="center">
<font style="font-size:16px;" face="arial">
<b>
Text text text
</b>
</font>
<br>
<br>
<font style="font-size:12px;" face="arial">
Text text text
</font>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
任何有关清理此事的建议都会有所帮助。
答案 0 :(得分：0)
你需要做CSS。没有原始的html方法来真正做到这一点。您可以主要通过内联进行，但必须有一些备份媒体查询。见下面的代码片段：
.contenttable {width:600px;}
.big {width:299px;}
@media only screen and (max-width: 600px) {
table {width:100% !important; max-width:none !important;}
td {border-collapse:collapse !important; padding-left:0 !important; padding-right:0 !important;}
}<body>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="299" align="left">
<![endif]-->
<table class="contenttable" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tbody>
<tr>
<td style="font-size:1px; mso-line-height-rule:exactly; line-height:5px" bgcolor="#8C231C" height="5"> </td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr height="100%">
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:299px;" class="big">
<tbody>
<tr>
<td align="center" style="font-family:Arial;font-size:16px; padding-left:10px; padding-bottom:15px; padding-right:10px; padding-top:15px; line-height:18px"><b>In This Issue</b></td>
</tr>
<tr>
<td align="center">
<table align="center" width="299" cellpadding="0" cellspacing="0" border="0" style="width:299px !important;">
<tr>
<td align="left" style="font-family:Arial;font-size:12px">
<ol>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
</ol>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td align="right" width="299">
<![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:299px;" class="big">
<tbody>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:10px; padding-top:20px; font-size:16px; font-family:Arial; line-height:18px"><b>Text text text</b></td>
</tr>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:20px; font-size:12px; font-family:Arial; line-height:15px">Text text text</td>
</tr>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:10px;"><img style="width:150px;height:50px;" src="http://img.en25.com/EloquaImages/clients/LaurelSpringsSchool/{b3492627-ee05-4126-9344-9e00be069cd3}_P7-1314_RegisterNowRed__Button.jpg"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:1px; mso-line-height-rule:exactly; line-height:5px" bgcolor="#8C231C" height="5"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>