表格在我的电子邮件模板上看起来不正确答案

【问题标题】：Tables not looking properly on my email template表格在我的电子邮件模板上看起来不正确
【发布时间】：2021-05-25 20:00:48
【问题描述】：

希望你一切顺利。我正在处理电子邮件模板。由于某种原因，我的代码无法正常工作（一旦通过邮件黑猩猩测试）。在我的网络浏览器上看起来很棒，但当然，它充分利用了我的 html/css 代码。

我有一个包含 2 列的表格，而在右边的表格中，我有另一个包含 3 行的嵌套表格。问题是，一旦屏幕宽度为 599 像素或更小，我会尝试更改布局，并且无法正常工作。

电子邮件提供商 (gmail) 上的最终结果如下所示：

这个人在电脑上的图像应该代表主表的左列，下面的内容是原始表右列中的嵌套表之一，两者都应该充分利用包装器的宽度（ 600 像素）。由于某种原因无法正常工作:(有人可以帮我解决这个问题吗？

这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Email Template 1</title>
<style type="text/css">

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.ExternalClass {
    width: 100%;
}

div[style*="margin: 16px 0"] {
    margin: 0 !important;
}

table, td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    margin: 0 auto !important;
    margin: 0 auto !important;
}

table table table {
    table-layout: auto;
}

img {
    -ms-interpolation-mode: bicubic;
}

.yshortcuts a {
    border-bottom: none !important;
}

a[x-apple-data-detectors] {
    color: inherit !important;
}
    
    .textLevel1 {
        font-size:30px;
    }
    
    .textLevel1b {
        font-size:22px;
    }
    
    .textLevel2 {
        font-size:18px;
    }
    
    .imageSideRight {
        width: 120px;
    }
    
    .ServiceSectionLeft {
        width: 250px;
    }
    
    .ServiceSectionRight {
        width: auto;
    }
    
    .notesAlignment {
        text-align: justify;
    }
    
    .whiteSpace {
        display: none;
    }
    
@media screen and (max-width: 599px) {
    .textLevel1 {
        font-size: 32px;
    }
    
    .textLevel1b {
        font-size:25px;
    }
    
    .textLevel2 {
        font-size: 20px;
    }
    
    .imageSideRight {
        width: 60px;
    }
    
    .ServiceSectionLeft {
        width: 100%;
        height: 200px;
        display: inline-block;
    }
    
    .ServiceSectionRight {
        width: 100%;
        display: inline-block;
    }
    
    .blueHidden {
        display: none;
        height: 0px;
    }
    
    .notesAlignment {
        text-align: left;
    }
    
    .whiteSpace {
        display: block;
        height: 30px;
    }
        
}
</style>
</head>
<body width="100%" height="100%" bgcolor="#e0e0e0" style="font-family: sans-serif;" yahoo="yahoo">
    <br>
    
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">
  <tr>
    <td><center style="width: 100%;">

        <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>
        
        <div style="max-width: 600px; width: 100%;"> 
          <!--[if (gte mso 9)|(IE)]>
            <table cellspacing="0" cellpadding="0" border="0" width="600" align="center">
            <tr>
            <td>
            <![endif]--> 
          
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
            <tr>
              <td style="padding: 0px; text-align: center" bgcolor="#ffffff">
                  <div class="box" style="width: auto;">
                      <img style="max-width: 100%; width: 100%; height: auto; margin: 0 auto;" src="images/logoAnimation2.gif" alt="" border="0">
                  </div>
              </td>
            </tr>
          </table>
            
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" height="auto">
            <tr>
              <td bgcolor="#243746" width="auto" style="background: url('./images/Image2.jpg') center / cover no-repeat #000000;"
>
                
              </td>
              <td bgcolor="#ffffff" class="imageSideRight">
                <table cellspacing="0" cellpadding="0" border="0" align="left" width="100%" style="max-width: 600px; background-color:#3A8DDE;" bgcolor="#468AC9">
                    <tr>
                        <td style="background-color:#ffffff; padding: 0px 20px;" height="60px" valign="top">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color:#243746; padding: 0px 20px;" height="276px" valign="top">
                        </td>
                    </tr>
                </table>  
              </td>
            </tr>  
            </table>
            
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px; color:#ffffff; width: 100%;">
            <tr>
              <td bgcolor="#243746" width="100%">
                  <p style="font-size: 30px; mso-height-rule: exactly; padding: 10px 30px; text-align: left"><b><span class="textLevel1">Hello</span><span id="UserName" class="textLevel1"> Mitch!</span></b><br>
                      <span style="text-align:justify;" class="textLevel2">Your service request <span id="UserRequestId"><b>#452847</b></span> with the followings details has been creataed and assigned to <span id="SupportTeamAssigned"><u>John P</u></span>.</span>
                  </p>
              </td>
            </tr>
          </table>
            
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" height="60px" style="max-width: 600px;">
            <tr>
              <td style="padding: 0px; text-align: center" bgcolor="#ffffff"></td>
            </tr>
          </table> 
            
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" height="auto">
            <tr>
              <td bgcolor="#243746" style="height:280px; background: url('./images/Image1.jpg') center / cover no-repeat #000000;" class="ServiceSectionLeft">
              </td>
              <td bgcolor="#ffffff" style="height: auto;" class="ServiceSectionRight">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px; background-color:#3A8DDE; height: auto;" bgcolor="#468AC9">
                    <tr>
                        <td style="background-color: #ffffff;">
                            <div class="whiteSpace"></div>
                            <img src="images/iconSupport.png" width="80px" height="80px" alt="Support Icon" border="0" style="height: 80px; width:80px; padding: 0px 30px;">
                        </td>
                    </tr>

                    <tr>
                        <td style="background-color:#ffffff; padding: 0px 30px;" height="140px" valign="top">
                            <p style="mso-height-rule: exactly;">
                            <span id="ServiceTitle" class="textLevel1b"><b>Service Title</b></span><br>
                            <span id="ServiceDescription" class="textLevel2">Service Description</span><br>
                            <span id="ServiceCategory" class="textLevel2">Category</span><br>
                            <span id="ServiceDate" class="textLevel2">5/1/21</span></p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td style="background-color:#3A8DDE; padding: 0px 20px;" height="60px" valign="top" class="blueHidden">
                        </td>
                    </tr>
                </table>  
              </td>
            </tr>  
            </table>
            
            <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" height="auto" style="max-width: 600px; color: #ffffff;">
            <tr bgcolor="#3A8DDE" style="background-color:#3A8DDE;">
                <td rowspan="3" width="30px"></td>
                <td style="text-align:justify;" height="auto">
                    <p style="mso-height-rule: exactly; padding:20px 0px;"><span class="textLevel2">If you’re shipping devices in for repair or replacement, please include Service Request # and ship it to:</span></p>
                </td>
                <td rowspan="3" width="30px"></td>   
            </tr>
            <tr bgcolor="#3A8DDE" style="background-color:#3A8DDE;">
                <td style="text-align:justify; border: 2px solid #ffffff; padding: 0px 20px;">
                    <p style="mso-height-rule: exactly;"><span class="textLevel1b"><b>Mtech</b></span><br>
                    <span id="ServiceRequestID" class="textLevel2">Service Request #</span><br>
                    <span id="PrimaryCentre" class="textLevel2">Primary Service Center</span><br>
                    <span id="CentreAddress" class="textLevel2">Service Centre Address</span></p>
                </td>
            </tr>
            <tr bgcolor="#3A8DDE" style="background-color:#3A8DDE; height: 50px;" height="50px">
                <td></td>
            </tr>
            </table>
            
          <table cellspacing="0" cellpadding="30" border="0" align="center" width="100%" style="max-width: 600px; color: #243746;">
            <tr>
              <td bgcolor="#ffffff" class="notesAlignment">
                  <p style="mso-height-rule: exactly;"><span class="textLevel2"><b>Note:</b> Assets Recovery (Device Buy-Back and Recycling) transactions are considered accepted and ownership transfered upon receipt of devices and purchase orders delviered.</span></p>
              </td>
            </tr>
          </table>
           
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
            <tr>
              <td height="340px" width="100%" style="background-color: #243746; background: url('./images/Image2.jpg') center / cover no-repeat #000000;">
              </td>
            </tr>
          </table>
            
          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" height="auto" style="max-width: 600px; color: #ffffff;">
            <tr bgcolor="#E54C37" style="background-color:#E54C37;">
                <td rowspan="3" width="30px"></td>
                <td style="text-align:justify;" height="auto">
                    <br>
                    <p style="mso-height-rule: exactly; text-align: left;"><span class="textLevel1"><b>Require to request a Buy Back?</b></span><br>
                        <span class="textLevel2">Assets Recovery transactions should be redirected to Mobility - Assets Recovery.</span>
                    </p>
                    <br>
                </td>
                <td rowspan="3" width="30px"></td>   
            </tr>
            <tr bgcolor="#E54C37" style="background-color:#E54C37;">
                <td style="text-align:justify; border: 2px solid #ffffff; padding: 0px 20px;">
                    <p style="font-size:18px; mso-height-rule: exactly;"><span class="textLevel1b"><b>Mobility</b></span><br>
                    <span class="textLevel2">Address</span><br>
                    <span class="textLevel2">Address.</span></p>
                </td>
            </tr>
            <tr bgcolor="#E54C37" style="background-color:#E54C37; height: 50px;" height="50px">
                <td></td>
            </tr>
            </table>

          <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
            <tr>
              <td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:12px; text-align: center; color: #999999;">
                <webversion style="color:#999999; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion>
                <br>
                <br>
                  <a href="">
                      <img src="./images/mobilityfooter.png" width="220px" height="auto" alt="footerLogo"/>
                    
                  </a>
                <br><br><br>
                <span class="mobile-link--footer">Mobility<br>345 Park Avenue</span> <br>
                <br>
                <unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe></td>
            </tr>
          </table>
            
        <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]--> 
          </div> 
        </center></td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

Mailchimp 不支持自定义模板（2021 年 2 月）。我可以告诉你的模板没有在他们的系统中运行，因为像<html> 这样的标签没有内联样式表。 Maichimp完全是垃圾。省去很多麻烦，并使用任何其他电子邮件服务提供商。

标签： html css html-email

【解决方案1】：

我们能否详细了解您在哪个电子邮件客户端以及什么设备上看到此内容？我可以在 Outlook iOS 中看到问题，但它们与您显示的不同。

我发现代码存在很多问题：

width 和 height 属性（所以不是 CSS 属性）包含单位，即width="80px" height="80px"。在声明维度的属性版本时，不需要包含单位格式。所以它应该只是width="80" height="80" OR style="width:80px; height:80px;"
Max-width 被大量使用，但是 Outlook 没有后备方案，它由幽灵表组成 - https://gist.github.com/elidickinson/5525752
表格行的样式可能非常粗略。我建议将这些样式一次性转移到表格单元格甚至表格中。
cellspacing 和 cellpadding 的使用也有点粗略，因为它可能会产生不同的结果。建议在表格单元格上设置 CSS 填充或在 div 上设置边距。
height="auto" & height:auto; 在表格和表格单元格中被大量使用。无论如何，这两个元素自然会自动调整高度。不是什么大问题，但如果试图保持干净的代码，则不需要。
背景图片不支持 Outlook - https://www.litmus.com/blog/the-ultimate-guide-to-background-images-in-email/

另外需要注意的是，Outlook 存在主要的呈现问题：

【讨论】：