extra white space between tables in html email for gmail client

Question

My code is at

http://jsfiddle.net/user1212/G86KE/4/

The problem is in gmail it leaves an extra white space between 2 tables inside the same cell. I have tried

Answer 1

So I know this may seem a little wild, but I had the exact same issue and it turned out to be the brs in my code. Yes, the fact that I formatted my HTML by nesting my tds resulted in gmail adding new tds with br tags inside.

It took me time to realize that we were converting the email header and footer code to text before appending it to our emails.

If you're using a similar approach I would suggest "minifying" your HTML.

Instead of:

<table>
    <tr>
        <td>
            Content
        </td>
    </tr>
</table>

Try:

<table><tr><td>Content</td></tr></table>

As horrid as it may seem.

Answer 2

Just add style="line-height:50%" onto the <table>. You will notice that this will affect the text line heights if you have text in your mailer. To fix this you will then have to add: style="line-height:100%" to the <td> with text.

Answer 3

I know this is not what you might be looking for but,...
Loose the spacer (spacer.gif), in order to loose the big spaces in a responsive email images has to be embedded in one cell per row, than will display all images block-ed.
Hope it helps, this was the solution I used in my case.
One cell per row:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="image.jpg" width="600" height="300" />
        </td>
    </tr>
</table>