1. 首页
  2. 问答
  3. 为什么我的嵌套表格在DOM的表格之外渲染？

为什么我的嵌套表格在DOM的表格之外渲染？

2016-11-17 48 views
0

我正在创建一个电子邮件，并且我有一个主表，然后在其中嵌套表。我的一个表格在DOM表格外部显示，我无法弄清楚原因。为什么我的嵌套表格在DOM的表格之外渲染？

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta http-equiv="X-UA-compatible" content="IE=edge" /> 
    <title> *|SUBJECT|*</title> 
    <style> 
    .bodyContent{ 
     color:#505050; 
     font-family:Helvetica; 
     font-size:16px; 
     line-height:150%; 
     padding-top:20px; 
     padding-right:20px; 
     padding-bottom:20px; 
     padding-left:20px; 
     text-align:left; 
    } 
    .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{ 
     color:#45B5DD; 
     font-weight:normal; 
     text-decoration:underline; 
    } 
    .bodyContent img{ 
     display:inline; 
     height:auto; 
     max-width:560px; 
    } 
    .header { 
     max-height: 125px; 
    } 
    .mso-width{ 
     width: 100%; 
    } 

    a[href^=tel]{ 
     color:#ffffff; 
     text-decoration:none; 
    } 
    @media only screen and (max-width: 480px){ 
     .ds-logo{ 
      display: block; 
      float: none; 
      margin: 0 auto; 
     } 
     .header { 
      padding: 10px 0; 
     } 
     .width-container { 
      width: 100% !important; 
     } 
     .phone-number{ 
      width: 120px; 
      margin: 0 auto; 
     } 
    } 

    </style> 
</head> 
<body style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color:#f4f4f4; height:100% !important; width:100% !important; "> 

    <!-- WRAPPER --> 
    <!--[if mso]> 
    <style> 
    .width-container { 
    display: inline; 
    width: 600px !important; 
} 
</style> 
<![endif]--> 
<table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr> 
     <td> 
      <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <!-- Header --> 
       <td class="header mso-width" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; max-width: 600px; width: 100% !important;" align="center" bgcolor="#000000" valign="top"> 

        <table class="width-container" align="left" border="0" cellspacing="0" cellpadding="0" style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px; width: 300px;"> 
         <tr> 
          <td style="background-color: #000000; width: 100%"> 
           <img class="ds-logo" src="http://example.com/emails/DS_White_Medium.png" /> 
          </td> 
         </tr> 
        </table> 
        <table class="width-container" align="left" bgcolor="#000000" border="0" cellspacing="0" cellpadding="0" style="width: 300px;"> 
         <tr> 
          <td style="background-color: #000000; color: #ffffff!important; font-family: Helvetica; font-size: 18px; height: 100%; line-height: 125%; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none" width="100%"> 
           <div class="phone-number"> 
            866.111.1111 
           </div> 
          </td> 
         </tr> 
        </table> 
       </td> 
       <!-- End Header --> 

      </table> 
      <!-- Hero Image --> 
      <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; height: 100% !important; width: 100% !important;" align="center" valign="top"> 
         <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px" width="100%"/> 
        </td> 
       </tr> 

      </table> 
      <!-- End Hero --> 

      <!-- Content --> 
      <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <td class="bodyContent" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 30px; text-align: left;" valign="top">{{lead.First Name:default=Friend}}, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> 
       </tr> 
      </table> 
      <!-- End Content --> 

      <!-- Icon Points --> 
      <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality 
          </td> 
         </tr> 
        </table> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Custom queues provide structured, user-tailored workflow processes 
          </td> 
         </tr> 
        </table> 
       </tr> 
      </table> 
      <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality 
          </td> 
         </tr> 
        </table> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Custom queues provide structured, user-tailored workflow processes 
          </td> 
         </tr> 
        </table> 
       </tr> 
      </table> 
      <!-- End Icon Points --> 
     </td> 
    </tr> 
</table> 
<!-- End Wrapper --> 
</body> 
</html>

这里是的jsfiddle

https://jsfiddle.net/9511L1qb/

来源

2016-11-17 Mike

+1

我敢打赌，这是因为https://validator.w3.org/nu/报告错误的缺失。 – Quentin

+0

验证器显示82个错误，其中大多数是不推荐使用的函数。 – Jacey

+0

这是一封电子邮件，因此它必须包含许多针对较老客户的电子邮件。 – Mike

回答

2

你已经错过了td标签在违规表格周围。

122行和147行（'ICON POINTS'模块）需要<td>和</td>。

你也有一个<tr>标记你的头模块

来源

2016-11-18 11:44:30 Gwesolo

0

为什么表狂潮？很多人遇到了很多麻烦，这只是糟糕的设计。使用DIV元素隔开页面，当你想显示一个表格时使用TABLE元素。我已经剥离了你的代码并创建了一个工作示例，看到可读性的巨大提高？

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta http-equiv="X-UA-compatible" content="IE=edge" /> 
    <title> *|SUBJECT|*</title> 
    <style> 
    .bodyContent{ 
     color:#505050; 
     font-family:Helvetica; 
     font-size:16px; 
     line-height:150%; 
     padding-top:20px; 
     padding-right:20px; 
     padding-bottom:20px; 
     padding-left:20px; 
     text-align:left; 
    } 
    .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{ 
     color:#45B5DD; 
     font-weight:normal; 
     text-decoration:underline; 
    } 
    .bodyContent img{ 
     display:inline; 
     height:auto; 
     max-width:560px; 
    } 
    .header { 
     max-height: 125px; 
    } 
    .mso-width{ 
     width: 100%; 
    } 

    a[href^=tel]{ 
     color:#ffffff; 
     text-decoration:none; 
    } 
    @media only screen and (max-width: 480px){ 
     .ds-logo{ 
      display: block; 
      float: none; 
      margin: 0 auto; 
     } 
     .header { 
      padding: 10px 0; 
     } 
     .width-container { 
      width: 100% !important; 
     } 
     .phone-number{ 
      width: 120px; 
      margin: 0 auto; 
     } 
    } 

    </style> 
</head> 
<body> 
    <!-- WRAPPER --> 
    <!--[if mso]> 
     <style> 
      .width-container { 
      display: inline; 
      width: 600px !important; 
     } 
     </style> 
    <![endif]--> 
    <div style="background-color: #ffffff; max-width: 600px; margin: 0 auto;"> 
     <div style="background-color: #000000;"> 
      <img class="ds-logo" style="float: left; margin: 10px 0 0 10px;" src="http://example.com/emails/DS_White_Medium.png" /> 
      <div class="phone-number" style = "color: white; font-family: Helvetica; font-size: 18px; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none"> 
       866.111.1111 
      </div> 
     </div> 
     <div class="bodyContent" style="padding: 40px 30px; text-align: center;"> 
      <div style="width: 100%;"> 
       <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px; margin: 10px auto;" width="100%"/> 
       <p style="text-align: left;">{{lead.First Name:default=Friend}}, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
       magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum.</p> 
      </div> 
      <div style="width: 100%; min-height: 300px;"> 
       <div class="leftblock" style="width: 40%; float: left; clear: left;"> 
        <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /> 
        <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality</p> 
       </div> 
       <div class="rightblock" style="width: 40%; float: left; margin-left: 10%;"> 
        <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> 
        <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Custom queues provide structured, user-tailored workflow processes</p> 
       </div> 
       <div class="leftblock" style="width: 40%; float: left; clear: left;"> 
        <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /> 
        <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality</p> 
       </div> 
       <div class="rightblock" style="width: 40%; float: left; margin-left: 10%;"> 
        <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> 
        <p style="font-family: Helvetica; font-size: 14px; text-align: left;">Custom queues provide structured, user-tailored workflow processes</p> 
       </div> 
      </div> 
     </div> 
    </div> 
<!-- End Wrapper --> 
</body> 
</html>

更新：这里是一个解决办法的情况下，你真的需要使用表结构：

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta http-equiv="X-UA-compatible" content="IE=edge" /> 
    <title> *|SUBJECT|*</title> 
    <style> 
    .bodyContent{ 
     color:#505050; 
     font-family:Helvetica; 
     font-size:16px; 
     line-height:150%; 
     padding-top:20px; 
     padding-right:20px; 
     padding-bottom:20px; 
     padding-left:20px; 
     text-align:left; 
    } 
    .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{ 
     color:#45B5DD; 
     font-weight:normal; 
     text-decoration:underline; 
    } 
    .bodyContent img{ 
     display:inline; 
     height:auto; 
     max-width:560px; 
    } 
    .header { 
     max-height: 125px; 
    } 
    .mso-width{ 
     width: 100%; 
    } 

    a[href^=tel]{ 
     color:#ffffff; 
     text-decoration:none; 
    } 
    @media only screen and (max-width: 480px){ 
     .ds-logo{ 
      display: block; 
      float: none; 
      margin: 0 auto; 
     } 
     .header { 
      padding: 10px 0; 
     } 
     .width-container { 
      width: 100% !important; 
     } 
     .phone-number{ 
      width: 120px; 
      margin: 0 auto; 
     } 
    } 

    </style> 
</head> 
<body style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color:#f4f4f4; height:100% !important; width:100% !important; "> 

    <!-- WRAPPER --> 
    <!--[if mso]> 
    <style> 
    .width-container { 
    display: inline; 
    width: 600px !important; 
} 
</style> 
<![endif]--> 
<table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr> 
     <td> 
      <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <!-- Header --> 
       <td class="header mso-width" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; max-width: 600px; width: 100% !important;" align="center" bgcolor="#000000" valign="top"> 

        <table class="width-container" align="left" border="0" cellspacing="0" cellpadding="0" style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px; width: 300px;"> 
         <tr> 
          <td style="background-color: #000000; width: 100%"> 
           <img class="ds-logo" src="http://example.com/emails/DS_White_Medium.png" /> 
          </td> 
         </tr> 
        </table> 
        <table class="width-container" align="left" bgcolor="#000000" border="0" cellspacing="0" cellpadding="0" style="width: 300px;"> 
         <tr> 
          <td style="background-color: #000000; color: #ffffff!important; font-family: Helvetica; font-size: 18px; height: 100%; line-height: 125%; text-align: right; letter-spacing: .0em; padding-right: 20px; padding-top: 20px; text-decoration: none" width="100%"> 
           <div class="phone-number"> 
            866.111.1111 
           </div> 
          </td> 
         </tr> 
        </table> 
       </td> 
       <!-- End Header --> 

      </table> 
      <!-- Hero Image --> 
      <table style="text-size-adjust: 100%; margin: 0px; background-color: #f4f4f4; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; border-top: 0px solid #BBBBBB; height: 100% !important; width: 100% !important;" align="center" valign="top"> 
         <img alt="" src="http://example.com/emails/independent/11082016/hero.jpg" style="max-width: 600px" width="100%"/> 
        </td> 
       </tr> 

      </table> 
      <!-- End Hero --> 

      <!-- Content --> 
      <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <td class="bodyContent" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 30px; text-align: left;" valign="top">{{lead.First Name:default=Friend}}, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> 
       </tr> 
      </table> 
      <!-- End Content --> 
      <!-- End Icon Points --> 
     </td> 
    </tr> 
</table> 
    <table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr> 
     <td>  
      <!-- Icon Points --> 
      <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality 
          </td> 
         </tr> 
        </table> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Custom queues provide structured, user-tailored workflow processes 
          </td> 
         </tr> 
        </table> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 
<table style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr> 
     <td> 
      <table class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" align="center"> 
       <tr> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 16px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-1.png" alt="" /><br /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Mobile optimization and a fully web-based platform enables cross-browser, cross-platform functionality 
          </td> 
         </tr> 
        </table> 
        <table align="left" class="width-container" style="text-size-adjust: 100%; margin: 0px; background-color: #ffffff; border-collapse: collapse !important; height: 100% !important; max-width: 600px; margin: 0 auto;" border="0" cellspacing="0" cellpadding="0" width="300"> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           <img src="http://example.com/emails/independent/11082016/icon-2.png" alt="" /> 
          </td> 
         </tr> 
         <tr> 
          <td style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 150%; padding-top: 20px; padding-right: 30px; padding-bottom: 20px; padding-left: 30px; text-align: center;" valign="top"> 
           Custom queues provide structured, user-tailored workflow processes 
          </td> 
         </tr> 
        </table> 
       </tr> 
      </table> 
      <!-- End Icon Points --> 
     </td> 
    </tr> 
</table> 
<!-- End Wrapper --> 
</body> 
</html>

结果也可以在此琴看出：https://jsfiddle.net/k3pykzLy/

来源

2016-11-18 08:38:14 Jenever

+0

Outlook可能有困难的时间适当地渲染div，所以不建议使用它们。我们最好坚持使用我们的桌子 – Gwesolo

+0

好吧，我不知道。我会更新我的原始答案，让你前进，让它工作。 – Jenever

相关问题

 相关问题