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

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

responsive outlook email-client html-email
person Jalees Ahmad    schedule 29.12.2016    source источник
comment
Все зависит от того, как почтовый клиент анализирует почту, а затем отображает ее. Вы хотите сказать: html не отображается? Или вы хотите сказать: html отображается, но не так, как ожидалось?   -  person sameerkn    schedule 29.12.2016
comment
Html отображается, но не точно, как я хочу   -  person Jalees Ahmad    schedule 29.12.2016

Ответы (2)


arrow_upward
0
arrow_downward

В Outlook есть ошибка, которая добавляет ширину к таблицам.. так что вы 2 x таблица: ширина 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>
person Bidstrup    schedule 02.01.2017

arrow_upward
0
arrow_downward

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

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

Ваше здоровье

person Syfer    schedule 13.03.2017