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

Я создаю отзывчивый шаблон электронной почты и использовал две таблицы в одной строке для мобильного просмотра, он может настраивать одну таблицу в одной строке и следующей таблице для второй строки. Он работает на всех платформах электронной почты, таких как Gmail, Yahoo, GMX, AOL, mail.com, но не работает над перспективой. Что мне делать?Почему две таблицы в одной строке не работают в HTML-шаблоне html для 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>

источник

2016-12-29 Jalees Ahmad

Это все зависит от того, как почтовый клиент разбирает почту, а затем выводит его. Вы хотите сказать: html не отображается? Или вы хотите сказать: html отображается, но не так, как ожидалось? – sameerkn

Html отображается, но неточно, как я хочу –

Перспективы есть ошибка, которая добавляет ширину таблиц .. так что 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>

источник

2017-01-02 13:30:30

Перспективы, безусловно, есть, как много ошибок. Моим предложением было бы добавить столбец-призрак между двумя таблицами.

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

Приветствия

источник

2017-03-13 00:55:32 Syfer

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

ответ

Смежные вопросы