Question

我在html中创建了一个响应式电子邮件模板。有一些风格问题。

我认为填充和保证金无法在 Outlook 2007及更高版本中使用。我尝试了很多这样的选项，如下所示

我需要使用纯html的模板（没有像appign monitor等的提供者）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A Simple Responsive HTML Email</title>
    <style type="text/css">
      .content {max-width: 900px !important;}
      .dynamic_container{width: 250px !important;border:1px solid #ccc;margin-top:25px;margin-bottom:25px;margin-left:25px;margin-right:25px;}
      a{padding-top: 10px;padding-bottom: 10px;padding-left: 15px;padding-right: 15px;}
      
      @media (min-width:651px) and (max-width: 768px){
      .content {max-width: 600px !important;}
      }
      @media (min-width:0px) and (max-width: 650px){
      .content {max-width: 300px !important;}
      .dynamic_container{width: 300px !important;border:1px solid #ccc;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;}
      }
    </style>
  </head>
  <body yahoo bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;">
    <!--[if (gte mso 9)|(IE)]>
      <style>
        .dynamic_container{width: 300px !important;border:1px solid #ccc;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;}
        .button > a{border-width: 10px 15px;border-color: #556401;border-style: solid;padding-top: 10px;padding-bottom: 10px;padding-left: 15px;padding-right: 15px;}
      </style>
      <table width="300" align="center" cellpadding="0" cellspacing="10" border="0">
        <tr>
          <td>
    <![endif]-->
    <table class="content" align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
          <table width="100" align="left" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="70" style="padding: 0px 20px 20px 0px;">
                <img src="assets/images/i4cfinancial_Logo.png" border="0" alt="" style="height: auto;" />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;">
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_002.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_002.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_002.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_003.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_003.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_003.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_004.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_004.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_004.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_005.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_005.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_005.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_006.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_006.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_006.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">&copy; Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a>
              </td>
            </tr>
            <tr>
              <td align="center" style="padding: 20px 0 0 0;">
                <table border="0" width="100%" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="50%" align="right" style="padding: 0 10px 0 10px;">
                      <a href="http://www.facebook.com/">
                        <img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" />
                      </a>
                    </td>
                    <td width="50%" align="left" style="padding: 0 10px 0 10px;">
                      <a href="http://www.twitter.com/">
                        <img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" />
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
    <![endif]-->
  </body>
</html>

我添加了一些屏幕截图。

在这些图片中，我概述了红线的问题。

仅供参考，这些红线不在设计中

桌面视图

移动视图

Outlook视图

你能否解释一下这些问题......

提前致谢。

Answer 1

检查您是否将显示内联放在任何课程中。这就是顶部和按钮边距和填充不起作用的原因。

检查以下css中的简单代码

display:inline

Answer 2

填充不适用于Outlook中的锚<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>A Simple Responsive HTML Email</title> <style type="text/css"> .content {max-width: 900px !important;} .dynamic_container{width: 31.33% !important;border:1px solid #ccc;margin:1%;} a{padding: 10px 8px !important;} @media (min-width:651px) and (max-width: 992px){ .content {max-width: 600px !important;} .dynamic_container{width: 47% !important;margin:1.5%;} a{padding: 10px 0 !important;} } @media (min-width:0px) and (max-width: 650px){ .content {max-width: 300px !important;} .dynamic_container{width: 96% !important;border:1px solid #ccc;margin:2%;} } </style> </head> <body bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;">  <table class="content" align="center" width="100%"> <tr> <td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;"> <table width="100" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0px 20px 20px 0px;"> <img src="assets/images/i4cfinancial_Logo.png" border="0" alt="" style="height: auto;" /> </td> </tr> </table> </td> </tr> <tr> <td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;"> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;"> <tr> <td> <table width="100%" border="0"> <tr> <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;"> Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside. </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td> </tr> <tr class="grid"> <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" /> </td> </tr> <tr class="grid_header" style="color: #153643; font-family: sans-serif;"> <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td> </tr> <tr class="grid"> <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;"> <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;"> </td> </tr> <tr> <td style="padding: 20px 0px 0px 0px;"> <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle"> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a> </td> </tr> <tr> <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;"> <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;"> <table width="100%" border="0"> <tr> <td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">© Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a> </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" width="100%"> <tr> <td width="50%" align="right" style="padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="50%" align="left" style="padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>  </body> </html>标记。所以我在表格中使用了填充...

以下是代码：

AzureFunctionsVersion

它在gmail，outlook等网络邮件提供商中运行良好......

填充和保证金不适用于响应式电子邮件模板（展望）

2 个答案: