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はインラインスタイルで '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>