Outlookで表にインラインブロックが表示されないようにする

Question

これは、Webブラウザ、Apple Mail、iosメールで動作する電子メールコードですが、Outlookを使用する場合、これらの要素はインラインブロックを表示しません。なぜ、どのように私はこれを修正することができますか？私はボタンと画像を積み重ねずに横に並べておきたい。ありがとう！ TDの両方のシェア

<table style="display:inline-block; margin-top:20px; margin-left:20px; margin-bottom:20px;" width="306px" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td align="center" style="width:150px; -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> 
     <td style="width:150px;"> 

    <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> 

CSSボックスモデルのための非常に良いサポートしていません

Answer 1

見通しTRをこの方法で、そうdisplay: inline-block;のようなものと：

<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 2

すると、このようにそれを試してみてくださいmarginはウェブ上でのように常に機能するとは限りません。すべての主要な電子メールクライアントに並んで各列の側を表示します親<table>で2 <tables>ラッピング

：

<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>