Я создал один адаптивный шаблон электронного письма в формате html. Есть некоторые проблемы со стилями.

Я думаю, что Padding и Margin не работают в outlook 2007 и более поздних версиях . Я перепробовал столько вариантов, как эти ниже

Маржа в html не работает в Outlook

css padding не работает в Outlook

Мне нужен шаблон с чистым html (без таких поставщиков, как монитор кампании и т. Д.)

<!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>

Я добавил несколько снимков экрана.

На этих изображениях я обрисовал проблему красными линиями .

К вашему сведению, этих красных линий нет в дизайне

Вид на рабочем столе введите описание изображения здесь

Мобильная версия

enter image description here

Просмотр Outlook

enter image description here

Не могли бы вы также объяснить проблемы ...

Заранее спасибо.

1
Sarvan Kumar 13 Мар 2018 в 14:25

2 ответа

Лучший ответ

Заполнение не работает для тега привязки <a> в 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;">
    <!--[if (gte mso 9)|(IE)]>
      <style>
        .dynamic_container{width: 32.6% !important;border:1px solid #ccc;}
        .button{padding:10px !important;}
      </style>
      <table width="100%" align="center" border="0">
        <tr>
          <td>
    <![endif]-->
    <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;">&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%">
                  <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>

И он отлично работает с поставщиками веб-почты, такими как gmail, outlook ...

0
Sarvan Kumar 12 Апр 2018 в 07:47

Проверьте, помещаете ли вы отображение в какой-либо класс. Вот почему не работают верхняя часть, поля кнопок и отступы.

Проверьте ниже простой код в своем CSS

display:inline
0
Sarvan Kumar 16 Апр 2018 в 13:55