Rendering of zero width table cells in Outlook - email

Question

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

Answer 1

try putting padding-left and/or padding-right to the tds containing the images, as inline css.
Latest edit: try this --
<tr>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>
i removed the width from tds containing images, hence it takes the default width of the images.

Answer 2

Outlook doesn't like hiding content ;-) But what should work - add some conditional code:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
<tr>
<td style="width:217px" valign="top">
column 1
</td>
<!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
hidden column 2
</td>
<!--<![endif]--><td valign="top">
column 3
</td>
</tr>
</table>
To hide it from outlook, the comments around the column with [!mso / endif] are enough. However you may want to hide in also in outlook.com, gmail.com and some others - for this the other styles are included. Don't forget to restore the settings in mobile view with media queries.
Good luck
Oleg

Answer 3

Have you tried putting the <td>s on the same line? That is, removing the linebreak between elements?
(inner element linebreaks are ignored)
<td>Foo
</td><td>
Bar</td>

Answer 4

Does "display: none" help?
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0" style="display:none"></td>
<td width="0" style="display:none"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
Btw, I did not suffer your problem on Outlook 2003, so I cannot verify it.

Answer 5

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.