Почему две таблицы в одной строке не работают в HTML-шаблоне html для Outlook?

Question

Я создаю отзывчивый шаблон электронной почты и использовал две таблицы в одной строке для мобильного просмотра, он может настраивать одну таблицу в одной строке и следующей таблице для второй строки. Он работает на всех платформах электронной почты, таких как Gmail, Yahoo, GMX, AOL, mail.com, но не работает над перспективой. Что мне делать?

Вот мой код:

<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

Перспективы есть ошибка, которая добавляет ширину таблиц .. так что 2 х стол: ширина 50%, становится каждый 51%, то они ломаются ... лучшее решение - сделать их меньше 50%.

Нашел еще несколько ошибок, например.

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

Dont have class дважды. То же самое с этим, не имеет стиля, дважды.

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

таблицы привидения или столбцы будут читать указанный прогноз (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>

Приветствия