Rendering Zero Width Table Cells in Outlook

Question

At first:
I hate Outlook :)

That's why:
I'm 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 td s")

 <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 two td 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've already tried my best.

• cellpadding = 0, cellspacing = 0, border = 0 on the table
• setting the width of each td using inline css
• adding border-collapse: collapse to all tds and table
• field addition: 0, filling: 0; border 0; for all tds inline css
• setting font size and line height to 0 in css line

Nothing succeeded.

Side notes:
If there is only one empty table cell in the middle, the rendering is fine. Thus, it seems that each td takes into account only half a pixel.This is already a simplified example, and I cannot change the structure of the table, which means that I have to find a workaround for rendering problems, and not fix a rather obscene coding style, unfortunately.

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

Answer 1

I kept trying to solve this problem - nothing (I tried all the suggestions here and more). In the end, I went in a more complicated, but also the cleanest way that I believe, and wrote a script that removes all empty columns and all empty rows with xsl conversion. Now it works in Outlook 2003 - 2010.

Answer 2

try putting padding-left and / or padding-right in tds containing images like inline css.

Last 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 the tds containing the images, so it takes the default width for the images.

Answer 3

Outlook does not like to hide content ;-) But what should work - add the 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 perspective, comment around the column using [! mso / endif] is enough. However, you can hide in outlook.com, gmail.com and some others - other styles are included for this. Do not forget to restore the settings in mobile mode using multimedia queries.

You might want to check out the https://responsive.email that generates this code for you.

Good luck Oleg

Answer 4

Have you tried putting <td> on one line? That is, removing the line between the elements?

(intrinsic line elements are ignored)

 <td>Foo </td><td> Bar</td> 

Answer 5

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 from your problem in Outlook 2003, so I can not check it.