Table cells stretching in MS Outlook

[dresden_phoenix]

I am having strange issue with some HTML emails that has me baffled. This is specific to Outlook2007-2013, in all other email clients the emails perform as expected.

I could summarize the issue as being two fold:

1. If I have text context inside a cell , even if there are no long words and the cell has an explicit width set , the cell expands horizontally and breaks the layout.
2. When I have cells that are single column and other rows have multi column cells, ( for example a row might contain a single cell with colspan=“2”, and the others contain two cells with no colspan) mystery (horizontal) space is added between the two table cells.

as a code sample :

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="textEdit" style="margin: 0px auto; table-layout: fixed;">
  <tbody>
    <tr>
      <td style="color: #000000;"><span>&nbsp;</span></td>
      <td style="color: #000000;" width="640">
        <table style="width: 640px; margin: 0 auto; table-layout: fixed;" border="0" width="640" cellspacing="0" cellpadding="0" id="Table_01">
          <tbody>
            <tr>
              <td colspan="2"><img width="640" src="http://placehold.it/640x407" align="bottom"></td>
            </tr>
            <tr>
              <td colspan="2"><img width="640" src="http://placehold.it/640x520" align="bottom"></td>
            </tr>
            <tr>
              <td width="320"><a shape="rect" href="https://sample-link.com"><img width="320" src="http://placehold.it/320x248" align="bottom"></a></td>
              <td width="320"><a shape="rect" href="https://sample-link.com"><img width="320" src="http://placehold.it/320x248" align="bottom"></a></td>
            </tr>
            <tr>
              <td colspan="2"><img width="640" src="http://placehold.it/640x955" align="bottom"></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="color: #000000;"></td>
    </tr>
  </tbody>
</table>

In this case the two cells in the third row are displayed’ with space’ between the images ( so am guessing that each cell is stretched out thus causing the weird visual effect)

I have used CSS, HTML attributes, nested tables, but i am still at a loss, so any advice on the matter is greatly appreciated.

[PaulOB]

I avoid any colspan or rowspan in html emails as I have had problems in the past.

If I need different numbers of cells in some rows then I close the table and start a new table with the right number of cells to start with. Of course that might break the integrity of the columns but if you fix the widths then you should be ok.

IOS won’t break cells into single colums (when using display:block for mobile view) so I try to avoid more than one cell anyway unless its a small table.

I hate email so much I avoid doing them these days:)

Good luck.

[dresden_phoenix]

Thanks Paul,
I will give that a shot (or at leas nest the tables so I don’t have to use ‘colspan’ )