Outlook not allowing tables to display inline block

Question

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>

Answer 1

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>