HTML 电子邮件中的 Outlook table 间距 - 没有常用的技巧
Outlook table spacing in HTML email - no usual tricks working
我有一个按钮，以便它在 Outlook 2007/10 中工作 (!) s 在更大的 table 内。但是，这会导致 Outlook 2007/10 中经常引用的问题，即 table 之间存在间隙。
下面是按钮的代码。显然，上面有 html head body 等。
我已经在 img 和 tables 上尝试了显示属性、宽度、对齐、border/padding/margin = 0 等...我已经尝试了所有可以在网上找到的解决方案，但没有任何解决方案它！
感谢收到关于其他尝试的任何想法！！
注意：这在 Outlook 中全面发生，而不仅仅是其中之一。
<tr>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
<td height="40">
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
<tbody>
<tr style="background-color: #ec6608;">
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"><a href="#" style="text-decoration:none; color:#ffffff" target="_blank">Text goes here</a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="36" style="background-color: #f2f2f2;"><a href="#" target="_blank"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
您需要在 <table> 标签中指定 table-layout。如果这仍然不起作用，您需要将 table 布局更改为浮动/显示布局。
<table style="table-layout: fixed; [.....]">
浮动布局是这样的：
<a href="..." style="float:left;"><img ....>
我感受到你的痛苦！多年来一直在制作电子邮件模板并与 Outlook 进行这些斗争。答案是你需要尽你所能使最简单的小部分工作。我会将每个单元格的背景颜色设置为橙色，并将左侧图像向左对齐，将右侧图像向右对齐 https://jsfiddle.net/0gncaogm/.
我还添加了 类（伴随您的行内宽度）使单元格成为带有 overflow-x:hidden 的最大宽度...
img{
display:inline-block;
margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:0;
}
.leftedge{
max-width:15px;
overflow-x:hidden;
}
.rightedge{
max-width:36px;
overflow-x:hidden;
}
在HTML...
<td height="40" width="36" style="background-color: #e76823;" align="right>
<a href="#" target="_blank">
<img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
</a>
</td>
这个出乎意料的难！我发现部分问题是由外部 table 上的 align="center" 引起的，导致 Outlook 2003 和 Live Mail 中出现 3px 的间隙。如果您仍然需要它与中心对齐，我会将此代码包装在另一个具有该属性的 table 中。为了解决其余部分，我删除了额外的 tables 并向您的 TD 添加了对齐。我还将 "border-collapse: collapse;" 添加到您的 table 中。您现在应该在桌面 Outlook 客户端中看到没有间距。
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text goes here</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
我有一个按钮，以便它在 Outlook 2007/10 中工作 (!) s 在更大的 table 内。但是，这会导致 Outlook 2007/10 中经常引用的问题，即 table 之间存在间隙。
下面是按钮的代码。显然，上面有 html head body 等。
我已经在 img 和 tables 上尝试了显示属性、宽度、对齐、border/padding/margin = 0 等...我已经尝试了所有可以在网上找到的解决方案，但没有任何解决方案它！
感谢收到关于其他尝试的任何想法！！
注意：这在 Outlook 中全面发生，而不仅仅是其中之一。
<tr>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
<td height="40">
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
<tbody>
<tr style="background-color: #ec6608;">
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"><a href="#" style="text-decoration:none; color:#ffffff" target="_blank">Text goes here</a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="36" style="background-color: #f2f2f2;"><a href="#" target="_blank"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
您需要在 <table> 标签中指定 table-layout。如果这仍然不起作用，您需要将 table 布局更改为浮动/显示布局。
<table style="table-layout: fixed; [.....]">
浮动布局是这样的：
<a href="..." style="float:left;"><img ....>
我感受到你的痛苦！多年来一直在制作电子邮件模板并与 Outlook 进行这些斗争。答案是你需要尽你所能使最简单的小部分工作。我会将每个单元格的背景颜色设置为橙色，并将左侧图像向左对齐，将右侧图像向右对齐 https://jsfiddle.net/0gncaogm/.
我还添加了 类（伴随您的行内宽度）使单元格成为带有 overflow-x:hidden 的最大宽度...
img{
display:inline-block;
margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:0;
}
.leftedge{
max-width:15px;
overflow-x:hidden;
}
.rightedge{
max-width:36px;
overflow-x:hidden;
}
在HTML...
<td height="40" width="36" style="background-color: #e76823;" align="right>
<a href="#" target="_blank">
<img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
</a>
</td>
这个出乎意料的难！我发现部分问题是由外部 table 上的 align="center" 引起的，导致 Outlook 2003 和 Live Mail 中出现 3px 的间隙。如果您仍然需要它与中心对齐，我会将此代码包装在另一个具有该属性的 table 中。为了解决其余部分，我删除了额外的 tables 并向您的 TD 添加了对齐。我还将 "border-collapse: collapse;" 添加到您的 table 中。您现在应该在桌面 Outlook 客户端中看到没有间距。
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text goes here</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>