HTML（Email）3列テーブル：列内のコンテンツを整列する方法

Question

3つの列を持つセクションでHTML電子メールを作成しようとしています。各セクションで使用されるボタンと背景が水平に整列するように列を揃えたいのですが、異なる電子メールプロバイダ間でこれを達成する方法がわかりません。私は背景を整列させる方法を見ていると思いますが、3列のボタンをどのように整列させるかについてはわかりません。 http://jsfiddle.net/UT7ZD/166/

table { 
 
    mso-table-lspace: 0pt; 
 
    mso-table-rspace: 0pt; 
 
    border-collapse: collapse; 
 
} 
 
table td div { 
 
    height: 100%; 
 
} 
 
.ReadMsgBody { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
} 
 
.ExternalClass { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
} 
 
body { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-family: Georgia, Times, serif 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
@media only screen and (max-width: 640px) { 
 
    body[yahoo] .deviceWidth { 
 
    width: 440px!important; 
 
    padding: 0; 
 
    } 
 
    body[yahoo] .center { 
 
    text-align: center!important; 
 
    } 
 
} 
 
@media only screen and (max-width: 479px) { 
 
    body[yahoo] .deviceWidth { 
 
    width: 280px!important; 
 
    padding: 0; 
 
    } 
 
    body[yahoo] .center { 
 
    text-align: center!important; 
 
    } 
 
}

<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff" style="margin:0 auto;"> 
 
    <td> 
 
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#ffede1"> 
 
     <td height="280px" style="padding:10px 10px 20px 10px"> 
 
     <div> 
 
      <center> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing euas magni quod error quidem incidunt eius qui consequatur ab asperiores optio similique ex reiciendis! 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 1 </b></a> 
 
      </center> 
 
     </div> 
 
     </td> 
 
    </table> 
 
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth"> 
 
     <td height="280px" style="padding:10px 10px 20px 10px"> 
 
     <div> 
 
      <center>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. 
 
      <br> 
 
      <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 2</b></a> 
 
      </center> 
 
     </div> 
 
     </td> 
 
    </table> 
 
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#ffede1"> 
 
     <td height="280px" style="padding:10px 10px 20px 10px"> 
 

 
     <div> 
 
      <center>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolferendis ullam consequatur. 
 
      <br> 
 
      <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 3</b></a> 
 
      </center> 
 
     </div> 
 
     </td> 
 
    </table>

Answer 1

はまた、HTMLを学ぶhttp://jsfiddle.net/UT7ZD/168/

を参照してください：それはGmailで整列すると、それは

ここ

は、私が今持っているものであるなど、Outlookでありません。 @mediaクエリを使用することはできますが、単純な行やセルをテーブルに追加する方法がわかりません
thisが役に立ちます。