1. 首頁
  2. 問答
  3. 爲什麼我的嵌套表格在DOM的表格之外渲染？

爲什麼我的嵌套表格在DOM的表格之外渲染？

2016-11-17 55 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

相關問題

 相關問題