Search code examples
emailoutlookhtml-emailoutlook-2010email-client

Rendering of zero width table cells in Outlook


First off:
I hate Outlook :)

Here is why:
I am trying to send an email with the following structure (this is just a simplified example so please don't tell me "Just get rid of the middle tds")

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0"></td>
       <td width="0"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

The problem is, that the two tds in the middle lead to a space between the two pictures as you can see in this screenshot http://i48.tinypic.com/6i8rvk.png

I feel like I have already tried everything possible.

  • cellpadding = 0, cellspacing = 0, border = 0 on table
  • setting the width of every td with inline css
  • adding border-collapse: collapse to all tds and the table
  • adding margin:0, padding:0; border 0; to all tds in inline css
  • setting the font-size and line-height to 0 in inline css

Nothing worked.

Side notes:
If there is only one empty table cell in the middle, the rendering is fine. So it seems as if each td only accounts for half a pixel
This is already a simplified example and I cannot change the structure of the table meaning that I have to find a workaround for the rendering problems rather than fixing the rather unpretty coding style unfortunately.

Testing
Here is my testing environment - feel free to play around with it: http://putsmail.com/d58ffa01c4b3e29123baab00754716


Solution

  • I have continued trying to solve this problem - nothing (I have tried every proposal here and more) worked.
    In the end I went the more difficult but also the cleanest way I believe and wrote a script that removes all empty columns and all empty rows with an xsl transformation. Now it works in Outlook 2003 - 2010.