Outlook 2013 rendering issue: nested table truncating adjacent text

Question

In developing html email newsletters, I often use a structure similar to the following:

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

When viewed in a browser, the result looks like this:

but when rendered by Outlook 2013, the left-most text in the main (yellow) table is cut-off:

Is there an explanation or a work-around for this?

(I would typically put an image, instead of text, in the inner (pink) table. This allows a design where the main (yellow) text seems to flow around the image. Whether image or text, the result is the same. The text in the main (yellow) table is truncated as seen here.)

Answer 1

Try to set a align left on the heading table, in my code this will work in all clients. Tested in litmus for all clients:

<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

Sometimes the accepted solution (adding align= "left" to heading/parent tables) does not work (with multiple nested tables in my case):

Adding mso-table-rspace to the left aligned table did work:

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

Answer 3

I am not sure what is the problem with Outlook 2013, but you can try to achieve same layout with div structure

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