왜 한 행의 두 테이블이 Outlook 용 HTML 전자 메일 템플릿에서 작동하지 않습니까?

Question

나는 반응 형 이메일 템플릿을 만들고 Mobile View 용으로 한 행에 두 개의 테이블을 사용하여 두 번째 행에 대해 하나의 테이블과 두 번째 테이블을 조정할 수 있습니다. Gmail, Yahoo, GMX, AOL, mail.com,하지만 Outlook에서 작동하지 않습니다. 어떻게해야합니까? ..

<tr> 
    <td align="center" bgcolor="#a90209" style="text-align:center; padding:0px;"> 
     <table align="left" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:left; text-align:left !important" class="responsive-table-block"> 
      <tbody> 
       <tr> 
        <td class="footer" style="text-align:right !important" style="padding:0;"> 
         <a href="#"> 
          <img src="logo" alt="" /> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

     <table align="right" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:right; text-align:right !important;" class="responsive-table-block"> 
      <tbody> 
       <tr> 
        <td class="footer" style="padding:0; text-decoration:none; text-align:right !important" class="full"> 
         <a href="#" target="_blank"> 
          <img src="social-icon" alt="" /> 
         </a> 
         <a href="#" target="_blank">  
          <img src="social-icon" alt="" /> 
         </a> 
         <a href="#" target="_blank">  
          <img src="social-icon" alt="" /> 
         </a> 
         <a href="#" target="_blank">  
          <img src="social-icon" alt="" /> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
</tr> 

Answer 1

Outlook이 테이블 폭을 추가하는 버그가 그래서 당신은 2 개 테이블 : 여기

내 코드입니다, 그들은 휴식 폭이 50 %, 각각 51 %가된다 ... 가장 좋은 해결책은 50 %보다 작게 만드는 것입니다.

다른 오류도 발견되었습니다. 예.

<td class="footer" style="padding:0; text-decoration:none; text-align:right !important" class="full"> 

클래스가 두 번 없습니다. 이것과 동일하게, 두 번 스타일이 없습니다.

<td class="footer" style="text-align:right !important" style="padding:0;"> 

마지막 코드

<tr> 
    <td align="center" bgcolor="#a90209" style="text-align:center; padding:0px;"> 
     <table align="left" cellpadding="0" cellspacing="0" border="0" width="49%" style="float:left; text-align:left !important" class="responsive-table-block"> 
      <tbody> 
       <tr> 
        <td class="footer" style="text-align:right !important; padding:0;"> 
         <a href="#"> 
          <img src="logo" alt="" /> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

     <table align="right" cellpadding="0" cellspacing="0" border="0" width="48%" style="float:right; text-align:right !important;" class="responsive-table-block"> 
      <tbody> 
       <tr> 
        <td class="footer full" style="padding:0; text-decoration:none; text-align:right !important"> 
         <a href="#" target="_blank"> 
          <img src="social-icon" alt="" /> 
         </a> 
         <a href="#" target="_blank">  
          <img src="social-icon" alt="" /> 
         </a> 
         <a href="#" target="_blank">  
          <img src="social-icon" alt="" /> 
         </a> 
         <a href="#" target="_blank">  
          <img src="social-icon" alt="" /> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
</tr> 

Answer 2

전망은 분명히 버그의 많은으로있다. 필자의 주장은 두 테이블 사이에 유령 열을 추가하는 것입니다.

<!--[if (gte mso 9)|(IE)]> 
</td><td align="left" valign="top" width="50%"> 
<![endif]--> 

유령 테이블 또는 열은 지정된 Outlook (gte mso 9 : microsoft outlook 2000보다 큼) 또는 IE에서만 읽을 수 있습니다. 유령 열을 추가 한 후 코드이 비슷한 보일 것입니다 : 그것은 모든 메일 클라이언트가 메일을 구문 분석하는 방법에 따라 달라집니다

<tr> 
 
    <td align="center" bgcolor="#a90209" style="text-align:center; padding:0px;"> 
 
     <table align="left" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:left; text-align:left !important" class="responsive-table-block"> 
 
      <tbody> 
 
       <tr> 
 
        <td class="footer" style="text-align:right !important" style="padding:0;"> 
 
         <a href="#"> 
 
          <img src="logo" alt="" /> 
 
         </a> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
<!-- ghost table --> 
 
<!--[if (gte mso 9)|(IE)]> 
 
    </td><td align="left" valign="top" width="50%"> 
 
<![endif]--> 
 
    
 
    
 
     <table align="right" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:right; text-align:right !important;" class="responsive-table-block"> 
 
      <tbody> 
 
       <tr> 
 
        <td class="footer" style="padding:0; text-decoration:none; text-align:right !important" class="full"> 
 
         <a href="#" target="_blank"> 
 
          <img src="social-icon" alt="" /> 
 
         </a> 
 
         <a href="#" target="_blank">  
 
          <img src="social-icon" alt="" /> 
 
         </a> 
 
         <a href="#" target="_blank">  
 
          <img src="social-icon" alt="" /> 
 
         </a> 
 
         <a href="#" target="_blank">  
 
          <img src="social-icon" alt="" /> 
 
         </a> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </td> 
 
</tr>

건배