2017-06-14 8 views
0

私が解決したすべての解決策は、私の問題を解決するのに役立つものではありません。私は自分のtrとtdの幅をOutlook Email Clientで動作させることができません。ここにサンプルがあります:Outlook 2013の幅

<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0"> 
    <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
    <!--Header Row--> 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
     <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td> 
    </tr> 
    <!--End Header Row--><!--Hero Image Row--> 
    <tr style="box-sizing: border-box; width: 100%;"> 
     <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td> 
    </tr> 
    <!--End Hero Image--><!--Main Heading/CTA--> 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
     <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
     <h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1> 
     <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p> 
     </td> 
     <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
     <table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
      <tbody> 
      <tr style="box-sizing: border-box;"> 
       <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
</tbody> 
</table> 

すべてのtdとtrに固定幅を追加しようとしました。私はパーセンテージを取り除こうとしました。 Outlookで何も動作していません...どこに問題がありますか?

答えて

1

、あなたは25%の幅を有する第2 <td>を加えました。

掃除機の出力を取得する方法は、二つのテーブル、画像の最初の2行分の1と2行のテーブルの残りの一つにテーブルを分割することです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
    <table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0"> 
    <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
    <!--Header Row--> 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
     <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td> 
    </tr> 
    <!--End Header Row--><!--Hero Image Row--> 
    <tr style="box-sizing: border-box; width: 100%;"> 
    <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td> 
    </tr> 
    <!--End Hero Image--><!--Main Heading/CTA--> 
</table> 
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0"> 
<tbody width="600" style="box-sizing: border-box; width: 100%;"> 
<tr width="600" style="box-sizing: border-box; width: 100%;"> 
    <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
    <h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1> 
    <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p> 
    </td> 
    <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
    <table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
     <tbody> 
     <tr style="box-sizing: border-box;"> 
      <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    </td> 
    </tr> 
</tbody> 
</table> 
</body> 
</html> 

これは、あなたのテーブルには、修正後、Outlook 2016にどのように見えるかです:

幸運。 Your table cell in Outlook 2016 with border=1

0

あなたはtdのことを話していませんでした。あなたはより大きな2つの画像が1つのtdの上にあり、一番下の行は2つのtdの上にあった。それはあなたのテーブルが整列していない理由です。また、ボックスサイズを使用しないようにしてください。古いブラウザでは読めません。すべての電子メールの開発者は、数キロバイトが電子メールでどのように重要であるかを知っています。

<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0"> 
 
<tbody width="600" style="box-sizing: border-box; width: 100%;"> 
 
    <tr style="box-sizing: border-box; width: 100%;"> 
 
    <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0"> 
 
     <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
 
     <!--Header Row--> 
 
     <tr width="600" style="box-sizing: border-box; width: 100%;"> 
 
      <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td> 
 
     </tr> 
 
     <!--End Header Row--> 
 
     <!--Hero Image Row--> 
 
     <tr style="box-sizing: border-box; width: 100%;"> 
 
      <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td> 
 
     </tr> 
 
     <!--End Hero Image--> 
 
     <!--Main Heading/CTA--> 
 
     </tbody> 
 
    </table></td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
<table width="600" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
 
    <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
 
    <!--Header Row--> 
 
    <!--End Header Row--> 
 
    <!--Hero Image Row--> 
 
    <!--End Hero Image--> 
 
    <!--Main Heading/CTA--> 
 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
 
     <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1> 
 
     <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p></td> 
 
     <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
 
     <tbody> 
 
      <tr style="box-sizing: border-box;"> 
 
      <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a></td> 
 
      </tr> 
 
     </tbody> 
 
     </table></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

希望これはあなたが後にした答えでした。第<tr>行で

関連する問題