Outlook not allowing tables to display inline block
13,871
Outlook doesn't have very good support for the css box model, so things like display: inline-block;
and margin
don't always work as they do on the web.
Wrapping the two <tables>
in a parent <table>
will display each column side by side in every major email client:
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<td width="150" style="padding: 20px 0 20px 20px;">
<!-- your first table : BEGIN -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Read More</a></td>
</tr>
</table>
<!-- your first table : END -->
</td>
<td width="150" style="padding-bottom:27px;">
<!-- your second table : BEGIN -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="https://www.facebook.com" target="_blank"><img alt="Facebook" style="margin-right:10px; vertical-align: middle;" src="http://media.com/FB-02.png"></a>
<a href="https://twitter.com" target="_blank"><img alt="Twitter" style="margin-right:10px; vertical-align: middle;" src="http://media.com/twitter-03.png"></a>
</td>
</tr>
</table>
<!-- your second table : END -->
</td>
</tr>
</table>
Author by
aleejelly
Updated on June 04, 2022Comments
-
aleejelly about 2 years
This is email code that works in web browsers, apple mail, ios mail, but when using Outlook, these elements do not display inline-block. Any idea as to why and how I can fix this? I want the button and the image to remain side by side instead of stacked. Thanks!
<table style="display:inline-block; margin-top:20px; margin-left:20px; margin-bottom:20px;" width="150px" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Read More</a></td> </tr> </table> </td> </tr> </table> <table style="display:inline-block; margin-bottom:27px;" width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="https://www.facebook.com" target="_blank"><img alt="Facebook" style="margin-right:10px; vertical-align: middle;" src="http://media.com/FB-02.png"></a> <a href="https://twitter.com" target="_blank"><img alt="Twitter" style="margin-right:10px; vertical-align: middle;" src="http://media.com/twitter-03.png"></a> </td> </tr> </table>