表中的 Outlook 2016 呈现差距

Question

包含左侧内容的表格下方会出现 1 像素的小间隙。这仅出现在 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]>&nbsp;<![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]>&nbsp;<![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>

Answer 1

这实际上不是餐桌问题，而是您的 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]>&nbsp;<![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]>&nbsp;<![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>

Answer 2

根据广告系列监视器，Outlook（2007-16 版）不支持溢出属性。

来源：https://www.campaignmonitor.com/css/positioning-display/overflow/