You can see the example here: http://jsfiddle.net/8EHED/8/
This is a tricky problem because I am forced to use two tables since each row of the two tables don’t have matching cells (otherwise, this would be one table).
Each table has 4 columns but the cells do not match in width from one row to the next. Sadly, however, the stacked tables have a small space in between them and it’s obvious when I paste this example into Thunderbird as a new email and send it to Gmail. Gmail, hotmail, and Outlook 2010 show this small space.
Is there a way to force these two tables to stack with non space in between them so that it renders like one large image and shows properly in Gmail et al?
Its actually not a style problem with your table, but with your images. You need to put
style="display: block;"on all images or they render inline and cause minor layout issues like that (in email)