user6279105
Reputation: 45
What would cause a line break in nested tables but only within Outlook?
Here's what it's supposed to look like:
Here's what it looks like in Outlook:
For some reason the "call us" table is being pushed to the next line below instead of staying in-line. I tried placing "white-space:nowrap" on tr's/td's and that didn't seem to solve my problem.
Below is the markup:
<tr>
<td>
<table id="border-1" align="left" style="border-top: 4px solid #444; border-left: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<a href="mailto:[email protected]?Subject=Hello!" target="_top" style="text-decoration:none;"><img width="50" src="mail.png" alt="Send Us An Email"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"><a href="mailto:[email protected]?Subject=Hello!" target="_top" style="color:#414042; text-decoration:none;">email us</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-top: 4px solid #444; border-right: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<a href="tel:703-372-1940" style="color:#414042; text-decoration:none;"><img width="50" src="call.png" alt="Call Us"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> <a href="tel:703-372-1940" style="color:#414042; text-decoration:none;">call us</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!---- top footer end --->
</table>
Upvotes: 0
Views: 592
Answers (2)
Syfer
Reputation: 4479
You could try what Richard has suggested by adding a ghost column
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
Or you can try doing something similar to below:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#444444" style="padding:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff">
<table id="border-1" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<a href="mailto:[email protected]?Subject=Hello!" target="_top" style="text-decoration:none;"><img width="50" src="mail.png" alt="Send Us An Email"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"><a href="mailto:[email protected]?Subject=Hello!" target="_top" style="color:#414042; text-decoration:none;">email us</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<a href="tel:703-372-1940" style="color:#414042; text-decoration:none;"><img width="50" src="call.png" alt="Call Us"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> <a href="tel:703-372-1940" style="color:#414042; text-decoration:none;">call us</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>I have added table with 4px padding around the two blocks you have and added CSS to the table which allows you to place tables side by side in outlook:
border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
If this doesnt work you can decrease the width of the two columns to 49% and it should work properly.
Note: decrease the width if you are using my code above.
Hope the above helps.
Upvotes: 0
RichardDev
Reputation: 552
You could try using out Outlook conditional code since this is solely an Outlook windows issue. And then target it to whatever your dimensions are.
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640"> <tr><td align="center" valign="top" width="318">
<![endif]-->
Side 1
<!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
Upvotes: 1
Related Questions
- Extra padding added to table element in Outlook Windows
- Outlook 2013 rendering issue: nested table truncating adjacent text
- Break in <td> only in outlook 2016
- HTML Email Outlook.com lines appearing under column
- Outlook adding space in HTML email
- Email's table width is breaking in Outlook
- Weird table formatting in Outlook 2010
- Extraneous spacing between paragraph and table in HTML Email
- Outlook 2007/2010 adds random line breaks/white space to HTML E-Mail
- Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)