I'm creating a 3x3 grid layout in an email, which I have done with tables. I have also made it mobile responsive so that when viewed on a mobile, the grid resizes to 2x2. This all works fine but for some reason on Outlook 2007 onwards it displays the grid so it shows them one under another. I know Outlook has its restrictions but does anybody know a way round this? I've been staring at my code for ages.
Here's my code (sorry I can't put all my code on as its longer than 30000 characters)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="background:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="background_table" style="background:#ffffff">
<tr>
<td align="center">
<table width="615" border="0" cellpadding="0" cellspacing="0" id="main_content" style="background:#ffffff">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0" id="inner_content">
<tr>
<td align="center"><a href="http://www.emailtest.net/?utm_source=email&utm_medium=email&utm_campaign=13_03_CG_EmailTemplate"><img src="http://www.emailtest.net/EmailTemplate/images/Top.jpg" alt="" width="602" height="89" border="0" class="width320 top" style="display:block"/></a></td>
</tr>
<tr>
<td align="center"><img src="http://www.emailtest.net/EmailTemplate/images/Banner.png" width="602" height="321" border="0" style="display:block" class="width320 banner"/></td>
</tr>
<tr class="hide">
<td align="center" class="hide"> </td>
</tr>
<tr>
<td align="center"><!-- End of #content_rows -->
</td>
</tr>
<tr>
<td align="center"><table width="566" border="0" cellspacing="0" cellpadding="0" class="width280">
<tr>
<td align="center">
<table width="276" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class="width320">
<tr >
<td width="361" ><table width="156" border="0" cellspacing="0" cellpadding="0" >
<tr >
<td align="center"><table width="100%" height="19" border="0" cellpadding="0" cellspacing="0" class="width320">
<tr bgcolor="#e4e4e4">
<td width="10"></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="left"><span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#33363e; line-height:16px !important;">Welcome to the latest enewsletter. <Strong>Click to download pictures</Strong> or <strong>click on the link above to view it in your browser</strong> and view such offers as <strong>plus much more...</strong></span></td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table></td>
<td width="10"></td>
</tr>
</table></td>
</tr>
<tr class="width280">
<td align="center" height="10"></td>
</tr>
<tr class="width280">
<td align="center" ><table width="276" border="0" cellspacing="0" cellpadding="0" class="width280" style="margin-bottom:20px">
<tr>
<td width="134"><a href="http://www.emailtest.net/"><img src="http://www.emailtest.net/EmailTemplate/images/freedel.jpg" width="134" height="131" border="0" style="display:block"/></a></td>
<td width="8"> </td>
<td width="134"><a href="http://www.emailtest.net/"><img src="http://www.emailtest.net/EmailTemplate/images/tiger.jpg" width="135" height="133" border="0" style="display:block"/></a></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="277" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:right;" class="width280 mobfloat" >
<tr>
<td width="277" valign="top" align="right" class="mobalign">
<a href="http://www.emailtest.net/special-offers/?utm_source=email&utm_medium=email&utm_campaign=13_03_CG_EmailTemplate"><img src="http://www.emailtest.net/EmailTemplate/images/bargain.jpg" width="267" height="280" border="0" style="display:block; float:right;" class="bargain" align="top"/></a>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td height="20"></td></tr>
<tr>
<td align="center">
<table width="560" border="0" cellspacing="0" cellpadding="0" class="width280" align="center">
<tr>
<td align="center" >
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class=" products">
<tr class="products">
<td width="178" style="padding:10px; border:1px solid #cccccc;" class=" products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr class=" products">
<td style="border-bottom:1px solid #cccccc;" class="products" align="center"><img src="http://www.emailtest.net/uploads/images/m/fm_2011_11_16_12_56_24_45772.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr class="products">
<td align="center" class="products"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666"><br />
Product
<br />
<strong><span style="font-size:14px; color:#000000;">£14.00</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £50 SAVE £36</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr class="products">
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px;" class="products">
<tr>
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products" align="center">
<table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr>
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2013_02_21_09_49_58_44302.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr>
<td align="center" class="producttext">
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666"><br />
Product<br />
<strong><span style="font-size:14px; color:#000000;">£14.00</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £50 SAVE £36</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
<tr>
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products">
<table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr>
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2013_02_21_09_38_07_98337.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr>
<td align="center" class="producttext">
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666"><br />
Product<br />
<strong><span style="font-size:14px; color:#000000;">£12.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £49.99 SAVE £32.49</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<div style="height:230px; float:left;" class="mobile-gap"></div>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class="products">
<tr class="products">
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr class="products">
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_21_33_85391.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr class="products">
<td align="center" class="products"><br /><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
<strong><span style="font-size:14px; color:#000000;">£7.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £39.99 SAVE £32.49</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr class="products">
<td class="products" height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
<tr>
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products" align="center">
<table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr>
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_20_51_63544.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr>
<td align="center" class="producttext"><br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
<strong><span style="font-size:14px; color:#000000;">£7.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £39.99 SAVE £32.49</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
<tr>
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr>
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_22_08_25416.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr>
<td align="center" class="producttext"><br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
<strong><span style="font-size:14px; color:#000000;">£7.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £39.99 SAVE £32.49</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class="products">
<tr class="products">
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr class="products">
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_03_13_62953.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr class="products">
<td align="center" class="products"><br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
<strong><span style="font-size:14px; color:#000000;">£9.99</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £44.99 SAVE £35</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr class="products">
<td class="products" height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
<tr>
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products" align="center">
<table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr>
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_03_58_76474.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr>
<td align="center" class="producttext"><br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">products<br />
<strong><span style="font-size:14px; color:#000000;">£9.99</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £44.99 SAVE £35</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
<table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
<tr>
<td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
<tr>
<td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_05_17_24091.jpg" width="156" height="217" border="0" class="productimage" style="display:block"/></td>
</tr>
<tr>
<td align="center" class="producttext"><br />
<span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">products<br />
<strong><span style="font-size:14px; color:#000000;">£9.99</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £44.99 SAVE £35</span></strong></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><img src="http://www.emailtest.net/EmailTemplate/images/search_banner.jpg" alt="How to search" width="602" height="182" border="0" class="width320 search" style="display:block"/></td>
</tr>
<tr>
<td><img src="http://www.emailtest.net/EmailTemplate/images/footer.jpg" alt="" width="602" height="190" border="0" class="width320 footer" style="display:block" /></td>
</tr>
<tr>
<td align="center">
<table width="560" border="0" cellpadding="0" cellspacing="0" id="content_rows">
<tr>
<td align="left">
<p><br />
<br />
<br /><br />
</p>
</td>
</tr>
</table><!-- End of #content_rows -->
</td>
</tr>
</table><!-- End of #inner_content -->
</td>
</tr>
</table><!-- End of #main_content -->
</td>
</tr>
</table> <!-- End of #background_table -->
</body>
</html>
Outlook 2007+ doesn't support floating elements
In the above code, each grid element is an HTML table with the following inline styles:
float:left;
display:inline-block;
Email reader support
floatisn't supported by Outlook 2007+, Gmaildisplayisn't supported by Outlook 2007+
Layout options
Non-responsive layout
- Put each grid element in a separate table cell.
Responsive layout
- Put each grid element in the same table cell (which they currently are), and add
align="left"to each grid element.
HTML
<table width="560" align="center">
<tr>
<td align="center">
<!-- Each grid element -->
<table width="178" align="left">...</table>
<table width="178" align="left">...</table>
<table width="178" align="left">...</table>
</td>
</tr>
</table>
I tested this with some success in Outlook 2007/2010/2013 using Litmus.
来源：https://stackoverflow.com/questions/16195284/how-to-make-a-responsive-grid-in-outlook-2007