gj-wes
Reputation: 932
Outlook 2016 rendering gap in table
Small 1px gap appears below table containing content on the left. This only appears in Outlook 2016 (Windows).
Had tried adding border-collapse:collapse, margin:0 and padding:0 but to no avail. Anyone else experienced this or dealt with it?
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Upvotes: 1
Views: 2667
Answers (2)
John Spires
Reputation: 1
Per Campaign Monitor, Outlook (versions 2007-16) does not support the Overflow property.
Source: https://www.campaignmonitor.com/css/positioning-display/overflow/
Upvotes: 0
Gortonington
Reputation: 3587
It actually wasn't a table issue, it was your TH. This is a known bug for outlook 2016. (https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/)
To solve it, any TH or TD that is causing this just needs to have 'overflow:hidden' in the inline style and it should make this line disappear.
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table align="left" cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left; overflow:hidden;">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Upvotes: 3
Related Questions
- Small 1px gap below table in Outlook email rendering
- Rendering of zero width table cells in Outlook
- font-weight inline use changing sans-serif font to serif in some Outlook for Windows
- Padding issue on HTML email
- Large gap in table - Outlook 2010
- Removing a 1px gap in Outlook 2013-2016
- htmlparse doesn't clear <style>
- HTML email - gaps between images in Outlook 2013