Outlook의 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입니다. 이것은 Outlook 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>