Outlook table spacing in HTML email - no usual tricks working

Question

I have a button that in order for it to work in Outlook 2007/10 (!) I have to put the three elements - left image, middle text, right image - in their own nested tables within a larger table. However, this causes the oft-quoted issue in Outlook 2007/10 which has the gaps between the tables.

Below is the code for the button. Obviously, there's the html head body etc above it.

I've tried display attributes, widths, align, border/padding/margin = 0 on img and tables alike... I've tried every solution I could find online and nothing is fixing it!

Any ideas for what else to try gratefully received!!

Note: this is happening across the board in Outlook, not just one of them.

<tr>
<td style="width: 15px; font-size: 15px;" valign="top">&#160;</td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
    <td height="40">
    <table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
    <tbody>
    <tr>
        <td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
        <img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
    </tr>
    </tbody>
    </table>
    <table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
    <tbody>
    <tr style="background-color: #ec6608;">
        <td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"><a href="#" style="text-decoration:none; color:#ffffff" target="_blank">Text goes here</a></td>
    </tr>
    </tbody>
    </table>
    <table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
    <tbody>
    <tr>
        <td height="40" width="36" style="background-color: #f2f2f2;"><a href="#" target="_blank"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></a></td>
    </tr>
    </tbody>
    </table>
    </td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top">&#160;</td>

Answer 1

This one was surprisingly tough! I found that part of the issue was caused by the align="center" on the outer table, causing a 3px gap in Outlook 2003 and Live Mail. If you still need it to align to the center, I would wrap this code in another table with that attribute. To solve the rest of it I removed extra tables and added align to your TDs. I also added "border-collapse: collapse;" to your tables. You should see no spacing in desktop Outlook clients now.

<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
    <tr>
        <td height="40" width="22" align="left">
                    <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                        <a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
                            <img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
                        </a>
                    </p>
        </td>
        <td height="40" width="180" align="left">
            <table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
                <tbody>
                    <tr>
                        <td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
                            <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                                <a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text goes here</a>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td height="40" width="36" align="left">
                    <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                        <a href="#" target="_blank">
                            <img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
                        </a>
                    </p>
        </td>
    </tr>
</tbody>

Answer 2

I feel your pain! been making email templates and having these battles with Outlook for years now. The answer is that you need to do everything in your power to make the simplest little section work. I would make the background-color of each cell the orange, and align the left image to the left, and the right to the right https://jsfiddle.net/0gncaogm/.

I've also added classes (to accompany your inline widths) to make the cells a max-width with overflow-x:hidden...

img{
    display:inline-block;
    margin-top:0;
    margin-right:0;
    margin-left:0;
    margin-bottom:0;
}
.leftedge{
    max-width:15px;
    overflow-x:hidden;
}
.rightedge{
    max-width:36px;
    overflow-x:hidden;
}

In the HTML...

<td height="40" width="36" style="background-color: #e76823;" align="right>    
    <a href="#" target="_blank">
        <img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
    </a>
</td>

Answer 3

You need to specify table-layout in <table> tags. If this still not working, you need to change your table layout to a float / display layout.

 <table style="table-layout: fixed; [.....]">

The float layout is like this:

 <a href="..." style="float:left;"><img ....>