Перспективы проблема рендеринга 2013: вложенная таблица усечения рядом текст

Question

При разработке HTML бюллетеней по электронной почте, я часто использую структуру, подобную следующей:

<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc"> 
<tr> 
    <td> 
     <table border="0" align="left"> 
     <tbody> 
     <tr> 
       <td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td> 
     </tr> 
     </tbody> 
     </table> 
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td> 
</tr> 

При просмотре в браузере, результат выглядит это:

но когда оказываемая Outlook 2013, самый левый текст в главном (желтый) таблицы светотеневой:

Есть ли объяснение или обходным для этого?

(Я бы обычно помещал изображение вместо текста во внутреннюю (розовую) таблицу. Это позволяет создать конструкцию, где основной (желтый) текст, кажется, обтекает изображение. Является ли изображение или текст результатом то же самое. текст в основном (желтый) таблицы обрезается, как показано здесь.)

Answer 1

Попытка установить Выровнять по левому краю на заголовок таблицы, в моем коде это будет работать во всех клиентов. Испытано в лакмус для всех клиентов:

<table cellspacing="0" cellpadding="0" width="560" align="left" border="0"> 
<tbody> 
    <tr> 
     <td align="left"> 
      <table cellspacing="0" cellpadding="0" align="left"> 
       <tbody> 
        <tr> 
         <!-- spacer for the top of the image --> 
         <td align="left" colspan="2"> 
          <img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" /> 
         </td> 
        </tr> 
        <tr> 
         <!-- the image or text --> 
         <td align="left"> 
          <img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" /> 
         </td> 

         <!-- spacer for the right of the image --> 
         <td align="left"> 
          <img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" /> 
         </td> 
        </tr> 
        <tr> 

         <!-- spacer for the bottom of the image --> 
         <td colspan="2" align="left"> 
          <img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" /> 
         </td> 
        </tr> 
       </tbody> 
      </table> 

      <!-- here your tekst --> 
      <div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div> 
     </td> 
    </tr> 
</tbody> 
</table> 

Answer 2

Я не уверен, что проблема с Outlook 2013, но вы можете попытаться достичь такой же макет со структурой сНу

HTML:

<div class="outer"> 
    <div class="first">text in the table cell.<br>and another line of text.<br>and a third line.</div> 
    <div class="second">Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</div> 
</div> 

CSS:

.outer { 
    width : 50%; 
    height : 50%; 
    background-color: green; 
} 

.first { 
    background-color: red; 
    float : left; 
} 

.second { 
    background-color: yellow; 
} 

Demo Link

Answer 3

Иногда общепринятый раствор (добавление align= "left" на заголовок/родительских таблиц) не работает (с несколькими вложенными таблицами в моем случае):

Добавление mso-table-rspace к выровненной таблице слева сделали работу:

<table border="0" cellpadding="0" cellspacing="0" align="left" style=mso-table-lspace:0pt; mso-table-rspace:7pt;">