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:

viewed in a browser

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

rendered by Outlook 2013

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

score 5 · Accepted Answer · answered Mar 26 '13 at 12:49

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>

Herr_Schwabullek · Answer 2 · 2018-08-31T10:34:09.273

1

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

edited Aug 31 '18 at 10:34

answered May 03 '16 at 12:09

Herr_Schwabullek

770
10
20

score -3 · Answer 3 · answered Mar 24 '13 at 19:20

-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

answered Mar 24 '13 at 19:20

Saket Patel

6,573
1
27
36

Sadly, this doesn't work at all in Outlook 2013. The divs are the same width with the red div on top of the yellow div. The green div doesn't appear at all unless you put content in it. – jalperin Mar 24 '13 at 20:48
2

sadly, div structure is not a solution for any email client related questions. Even if this fixed it in outlook, it would break it somewhere else. It is sad, I know. :) – S.Kiers Sep 03 '13 at 20:30

Outlook 2013 rendering issue: nested table truncating adjacent text

3 Answers3

Linked