table 中的 Outlook 2016 渲染差距
Outlook 2016 rendering gap in table
包含左侧内容的 table 下方出现 1px 的小间隙。这仅出现在 Outlook 2016 中 (Windows)。
曾尝试添加 border-collapse:collapse、margin:0 和 padding:0 但无济于事。还有其他人经历过或处理过吗？
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
这实际上不是 table 问题，而是您的 TH。这是 outlook 2016 的一个已知错误。(https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/)
要解决这个问题，任何导致此问题的 TH 或 TD 只需要在内联样式中包含 'overflow:hidden' 并且它应该使该行消失。
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table align="left" cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left; overflow:hidden;">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
根据 Campaign Monitor，Outlook（2007-16 版）不支持溢出 属性。
来源：https://www.campaignmonitor.com/css/positioning-display/overflow/
包含左侧内容的 table 下方出现 1px 的小间隙。这仅出现在 Outlook 2016 中 (Windows)。
曾尝试添加 border-collapse:collapse、margin:0 和 padding:0 但无济于事。还有其他人经历过或处理过吗？
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
这实际上不是 table 问题，而是您的 TH。这是 outlook 2016 的一个已知错误。(https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/)
要解决这个问题，任何导致此问题的 TH 或 TD 只需要在内联样式中包含 'overflow:hidden' 并且它应该使该行消失。
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table align="left" cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left; overflow:hidden;">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
根据 Campaign Monitor，Outlook（2007-16 版）不支持溢出 属性。
来源：https://www.campaignmonitor.com/css/positioning-display/overflow/