TRをTDに集中させる方法はありますか？

Question

私はHTMLメールに取り組んでいて、白いTRに緑色のTDを配置して、緑色のボックスの左右に20ピクセルの余白があるようにしています。

グリーン部分にTD幅を設定して、マージン0をautoに設定しようとしましたが、グリーンはTRの幅にちょうど伸びます。

緑色のTDを中央に押し込む2つのTDを入れようとしましたが、どちらも機能しませんでした。

コードスニペットを含めて、＃a6d971のTRに問題があります。 DIVのとCSSに

<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;"> 
    <tbody> 
     <tr> 
      <td style="margin: 0 auto;"> 
       <img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" /> 
      </td> 
     </tr> 
     <tr bgcolor="#fff" height="75"> 
      <td valign="top" style="text-align:center;"> 
       <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;"> 
        Regular sales happen every day 
       </p> 
       <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;"> 
        9am - 11pm 
       </p> 
      </td> 
     </tr> 


     <tr bgcolor="#fff" height="75" padding="10"> 
      <td bgcolor="#000" width="20"></td> 
      <td bgcolor="#a6d971" width="300" style="margin: 10;"> 
      </td> 
      <td bgcolor="#000" width="20"></td> 
     </tr> 



     <tr bgcolor="#fff"> 
      <td valign="top"> 
       <table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style=""> 
        <tbody> 
         <tr> 
          <td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;"> 
           <h3>Nine @ Nine</h3> 
           <p>Fuel up! Dresses, tunics and other items including:</p> 
          </td> 
         </tr> 




         <tr> 

         </tr> 

        </tbody> 
       </table> 
      </td> 
     </tr> 


     <tr> 
      <td style="margin: 0 auto;"> 
       <img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

スイッチ、ほとんどの電子メールクライアントは、かなりよくスタイルをサポートし、あなたのTD要素内のDIVを使用することができ、あなたが望むかもしれない他のものを中心または行うのは簡単だろう。例

については

<tr style="background-color: white;"> 
    <td style="background-color: green;"> 
    <div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div> 
    </td> 
</tr> 

あなたはDIVのあなたも避けることができるテーブルを使用する場合にも注意してください。あなたは、テーブルを使用する必要がある場合

Answer 2

、同様にそれらを少し虐待かもしれない：

<table><tr align="center"> 
    <td width="50%">one</td> 
    <td style="background-color:green">two</td> 
    <td width="50%">three</td> 
</tr></table> 

http://jsfiddle.net/mblase75/yntfu/

Answer 3

ハックをハックの上に。ちなみに

<table width="100%" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;"> 
       This is stuff. 
      </td> 
     </tr> 
    </tbody> 
</table> 

http://jsfiddle.net/zy6GU/

、同じことがDIVで動作します：

<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div> 

http://jsfiddle.net/zy6GU/1/

Answer 4

あなたは '電子メールのために' について何を話していますか？あなたは<a href="mailto:somewhere@domain.com">Email Me</a>のようなメールアドレスを意味しますか？もしそうなら、リンクをTDの中心に置くCSSや、TDのcolspanと組み合わせて使用​​したいと思うでしょう。

Answer 5

私はCSSの専門家ではないが、これは（余分なタグで）私の作品：すべてのあなたがしたいときに電子メールクライアントはCSSで持っているすべての問題については

<table> 
    <tr style="background-color: white; border: 1px solid black;"> 
    <td style="background-color: green; display: block; margin: 0 20px;"> 
     <!-- Content --> 
    </td> 
    </tr> 
</table>