Разрыв рендеринга 2016 в таблице

Question

Маленький промежуток в 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]>&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. Это известная ошибка для прогноза 2016. (https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/)

Чтобы решить эту проблему, любой TH или TD, вызывающий это, должен иметь «переполнение: скрытый» в встроенном стиле, и это должно заставить эту строку исчезнуть.

<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>