2016-08-03 3 views
3
<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;"> 
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;"> 
    <tr> 
     <td width="100%" valign="top"> 
      <table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth"> 
       <tr> 
        <td><img src="spacer.gif" width="100%" height="30" alt="" /></td> 
       </tr> 
      </table> 
      <!-- More tables with content --> 
     </td> 
    </tr> 
</table> 
</body> 

私はこれと研究について多くのテストを行いました。私はこれを正しく実行していると信じていますが、テーブルをyahooに集中させることを期待してテストするには、そうではありません!ヤフーテーブルセンタリングアライメント

修正プログラムは、table-layoutを置くことになっています。 100%の幅で外側のテーブルに。

私がやった。

誰も私がこの仕事をしないためにここで間違っている点を見つけることができますか?

乾杯

答えて

1

以下のコードで修正する必要があります。あなたの電子メールコードには、もう少しだけCSSリセットが必要です。

<html> 
    <head> 
     <style> 
      /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ 
      table { 
       border-spacing: 0 !important; 
       border-collapse: collapse !important; 
       table-layout: fixed !important; 
       margin: 0 auto !important; 
      } 
      table table table { 
       table-layout: auto; 
      } 
     </style> 
    </head> 
    <body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;"> 
     <center style="width: 100%; background: #f6f6f6;"> 

      <!-- Your Email Code Begins Here --> 
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;"> 
       <tr> 
        <td width="100%" valign="top"> 
         <table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth"> 
          <tr> 
           <td><img src="spacer.gif" width="100%" height="30" alt="" /></td> 
          </tr> 
         </table> 
         <!-- More tables with content --> 
        </td> 
       </tr> 
      </table> 
      <!-- Your Email Code Ends Here --> 

     </center> 
    </body> 
</html> 
+0

上記のコードは動作しますが、contentテーブルをラップする最初の​​タグにalign = "center"を追加するだけでもかまいません。本質的な点は、Yahooがテーブルのalignパラメータを無視していることであり、​​タグにのみ注目していることです。 –