HL0
Tables & Ghost Tables in Outlook
I have been having problems with tables in Outlook, first the two columns wouldn't align next to each (went underneath instead). I added a ghost table but not the columns are skinnny and there's a large gap in the middle.
<table st-sortable="3-images+text-columns" bgcolor="#ebebeb" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="680" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table width="680" align="center">
<tr>
<td width="340">
<![endif]-->
<tr>
<td valign="top">
<table width="50%" align="left" cellpadding="20" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding:10px 10px 10px 0">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a href="#"><img st-image="3images2" width="170" src="http://www.avalonrisk.com/questnewsletter/avalon_external/conferences/2017/NCBFAA/images/scholarship.png" alt="" border="0" style="width: 170px;" class="deviceWidth" />
</a>
</p>
</td>
</tr>
<tr>
<td style="padding:0px 35px 35px 25px">
<table width="100%">
<tr>
<td st-title="3images-title" align="center" valign="middle" style="padding:0 10px 0 0"><a href="#" style="text-align: center; text-decoration: none; font-size: 18px; color: #323A45; font-family: 'Roboto', Helvetica, Arial, sans-serif">EDUCATION</a>
</td>
</tr>
</table>
<p st-title="3images-text" style="color:#999999; text-align:center; font-size: 13px; line-height:19px">We are committed to supporting industry growth and education. We are proud to sponsor this year's CES scholarship winner, Patricia Niemann. Through the scholarship, Patricia will be able to attend the conference for the first time and be able to network and learn from the educational sessions provided.</p>
<table width="80" align="center" st-button="edit" bgcolor="#FFFFFF">
<tr>
<td st-content="read-more-button" style="padding:5px 5px 8px; border:1px solid #a2a2a2" align="center">
<a href="#" style="color:#323A45;font-size:12px;text-align:center;text-decoration:none;font-family: 'Roboto', Helvetica, Arial, sans-serif;-webkit-text-size-adjust:none;">read more</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Image 2 -->
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="340">
<![endif]-->
<table width="50%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding:10px 0">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<a href="#"><img st-image="3images3" width="170" src="http://www.avalonrisk.com/questnewsletter/avalon_external/conferences/2017/NCBFAA/images/seminar.png" alt="" border="0" style="width: 170px" class="deviceWidth" />
</a>
</p>
</td>
</tr>
<tr>
<td style="padding:0 35px 35px 25px">
<table width="100%">
<tr>
<td st-title="3images-title" align="center" valign="middle" style="padding:0 10px 0 0"><a href="#" style="text-align: center; text-decoration: none; font-size: 18px; color: #323A45; font-family: 'Roboto', Helvetica, Arial, sans-serif">SEMINARS</a>
</td>
</tr>
</table>
<p st-title="3images-text" style="color:#999999; text-align:center; font-size: 13px; line-height:19px">Avalon's Executive Vice President, Michael Brown will also be discussing the challenges and risk management solutions for your business. Keith Sanchez, Avalon's Divisional Vice President will also be presenting on Thursday's educational workshops.</p>
<table width="80" align="center" st-button="edit" bgcolor="#FFFFFF">
<tr>
<td st-content="read-more-button" style="padding:5px 5px 8px; border:1px solid #a2a2a2" align="center">
<a href="" style="color:#323A45;font-size:12px;text-align:center;text-decoration:none;font-family: 'Roboto', Helvetica, Arial, sans-serif;-webkit-text-size-adjust:none;">read more</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Image 3 -->
</td>
</tr>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
There's 2 things I'm noticing in the code:
10 the ghost table isn't placed properly - you have the <table> opening for the ghost table directly inside the surrounding table so you have a structure that is
which probably messes somethings up. Here's an example of the ghost table set up I use. It's a it different since I use pixel widths + media queries but the structure should be the same.
I think the issue with the sections getting too skinny is that your tables are set to be 50% of their parent width.
The 50% works fine when there's no ghost table and the direct parent is the whole width of the section and 680 is the closest parent with a defined width. When you add the ghost table now it has the <td> with a width of 340px as the closest parent with a defined width so that 50% wide table is now half of 340px.
Charles is probably correct in that you should just declare the columns to be smaller than 50% rather than using the ghost table. I've found that about 20px between the tables to avoid them folding under each other in outlook so setting them to about 48% would probably work?
It is difficult to traverse the provided code as it is incomplete. Also, the Community comments support markdown. If you wrap your code in a < code > tag or include a Builder link, it is far easier to read.
While I cannot pinpoint your exact problem, I can tell you that I recently created a 6-column grid system in email and avoided the ghost table hack by simply making the sum of each column add up to 98%. Most Outlook display issues boil down to math. Make the children add up to less than the parent, use the align="" attribute and your columns will float.