HTML email - Outlook 2007+10, unrelated tables aligning

问题

I've got a dilemma that I have never come across before that has stumped me. In a design a have built Outlook 07&10 are aligning two entirely unrelated table rows. This is a complex email layout, and so contains a lot of tables. The content in the left column is sticking to the bottom (or top of the sibling) hr tag depicted here:

<tr><td height="20"></td></tr>
<tr><!-- start of sidebar product (horizontal)-->
    <td>
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="170">
                    <a href="" title="inline product 2" style="text-decoration: none;">
                        <!-- product Image -->
                        <img border="0" style="font-family:Arial,Helvetica,sans-serif;display:block" src="sidebar-beer-tbc.jpg" alt="South Island Marlborough Sauvignon Blanc" width="170" height="105">
                    </a>    
...

There is at least three parent tables per column (when the different sections are added up), so there should be no reason why the rendering engine is trying to align them.

Any help would be greatly appreciated, this has got me at my wit's end.

As this is for a client and contains sensitive information, I haven't made available the finished document, but here is an annotated grab of the two comparisons. https://skitch.com/tilt/r3w65/photoshop

回答1:

You've hit the 'Outlook 2007 page break bug'. Basically, because Outlook 2007/10 use the Word rendering engine, they organise it for printing instead of the screen.

If you hit something that Outlook can't insert a page break between, it just inserts a massive space above it to where it can insert a page break.

It's really annoying - the only way around it is to completely close off the rows above at the same place, insert something that's 100% wide (can be a transparent 1px high line), and then start the tables again underneath.

回答2:

Outlook does this when there are spans (colspan or rowspan). While other clients treat spanned rows and columns and separate in terms of layout, outlook will calculate them incorrectly. It's the result of the use of the idiotic Word layout engine in outlook -- a decision that has set email formatting back to 1995 -- but I digress.

The solution to your problem is to take the offending boxes and instead of using any spans, make it into its own complete table. So in your image, the individual drinks on the left will be in a 3x3 unspanned table, and the vertical "product TBD" sidebar would be it's own 1x4 or whatever vertical unspanned table. In general, this has solved it for me. Also, sometimes it's necessary to give these inner tables a fixed height to prevent them from becoming height="100%" and breaking the layout (again, only in outlook).

来源：https://stackoverflow.com/questions/5630718/html-email-outlook-200710-unrelated-tables-aligning