Соответствие высоты TD в электронных письмах HTML

Question

В настоящее время я создаю электронную почту в формате HTML, и у меня возникают реальные проблемы с созданием двух TD одинаковой высоты для всех почтовых клиентов.

Это отзывчивое электронное письмо, поэтому я разделил столбцы на две таблицы вместо того, чтобы вкладывать их в одну таблицу, чтобы они могли вставляться друг в друга на мобильных устройствах.

Я пытался излагать высоты как в TD, так и в таблицах, но с небольшим успехом, в конце я даже добавил минимальную высоту.

Я должен сказать, что он отлично работает во всех веб-браузерах (кроме Yahoo). Моя большая проблема связана с Outlook 2007 и 2010, который является тем, что клиент на самом деле достаточно досадно проверяет электронную почту.

Вот пример:

<!-- square panels wrapper -->
<table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_wrapper"><tr><td>

    <!-- square panels container -->
    <table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_container"><tr><td>

        <!-- left table -->
        <table width="290" height="640" border="0" cellpadding="10" cellspacing="0" align="left" class="square_panel_left" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

        <!-- right table -->
        <table align="right" width="290" height="640" border="0" cellpadding="10" cellspacing="0" class="square_panel_right" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
            <tr>
              <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; margin-top: 0px;  text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo. Aenean molestie tristique erat a consequat. Vestibulum nec nunc vel velit ornare fermentum in eget ipsum. Mauris venenatis volutpat malesuada. Curabitur fringilla libero at turpis tempor egestas quis rhoncus quam.  
            </td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

    </td></tr></table>

</td></tr></table>

Answer 1

Да, как правильно грустный изнашивающийся волк, вы можете принудительно использовать атрибут min-height для td - поместить невидимое изображение в td или обернуть его в div. Пример для первого случая:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>

Answer 2

Если высота для <td> всегда исправлено, вы можете попробовать вставить <img src="http://somesite.com/dot.png" style="width:1px;height:640px" /> в <td>, это прозрачное изображение будет невидимым и будет иметь фиксированную высоту, поэтому ваш<td> будет иметь ту же минимальную высоту, что и изображение.