Rendering of zero width table cells in Outlook

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

Teena Thomas · Answer 1 · 2012-09-14T14:20:27.857

3

try putting padding-left and/or padding-right to the tds containing the images, as inline css.

Latest edit: try this --

i removed the width from tds containing images, hence it takes the default width of the images.

edited Sep 14 '12 at 14:20

answered Sep 13 '12 at 14:58

Teena Thomas

5,139
1
13
17

I did this already - http://putsmail.com/d58ffa01c4b3e29123baab00754716 It doesn't work. – Horen Sep 14 '12 at 06:57
i put padding-right:10px in the first `` in your test environment and it looks fine. is it not working on outlook? – Teena Thomas Sep 14 '12 at 13:32
I tested the above for outlook 2003, 2007 & 2010, all look good. I use getResponse.com for my testing for different email clients, its free :) – Teena Thomas Sep 14 '12 at 13:42
Can you post the source code that worked? I would like to test it and see it in action in my Outlook installation :) – Horen Sep 14 '12 at 13:51
` ` – Teena Thomas Sep 14 '12 at 13:58
Ok, there are a couple of problems with this code: 1. I am trying to eliminate the space between the two pictures, so I really don't want to set a padding of 10px, 2. you deleted the two empty `td`s in the middle - without them there is no problem (I knew that from the beginning). In conclusion it solve my problem at all – Horen Sep 14 '12 at 14:05
may i ask, whats the need for 0 width tds? – Teena Thomas Sep 14 '12 at 14:09
it's the given structure that I cannot influence. I wish I could just get rid of them but since the code is generated automatically and in reality is much, much more complicated than my simplified example it is impossible to just delete them. So I have to find a work around. – Horen Sep 14 '12 at 14:13
did that lastest edit work? if so, can i get the bounty pls :) – Teena Thomas Sep 14 '12 at 17:34

most_wanted · Answer 2 · 2020-09-17T15:04:30.460

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

score 1 · Answer 3 · answered Sep 12 '12 at 08:59

1

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>

answered Sep 12 '12 at 08:59

Ben

54,723
49
178
224

score 0 · Answer 4 · answered Sep 20 '12 at 20:58

0

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.

answered Sep 20 '12 at 20:58

Grimace of Despair

3,436
26
38

Er... thanks for the bounty anyway I guess. Does that mean it solved anything on Outlook 2003? Have you tried combining this and coder1984's solution for 2007/2010? – Grimace of Despair Sep 24 '12 at 19:22

score 0 · Accepted Answer · answered Oct 06 '12 at 15:57

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.

Rendering of zero width table cells in Outlook

5 Answers5