Question

我使用以下格式作为模板来发送带有表格的电子邮件。格式是假设更改表格行之间的阴影。

当电子邮件发送到Outlock或Gmail时，阴影开关不会显示。但是当将电子邮件HTML提取到在线HTML编辑器时，会显示开关。

请协助。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#outlook a {
    padding: 0;
}
body {
    width: 100% !important;
    background-color: #ffffff;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    margin: 0;
    padding: 0;
}
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
ol li, ol li p {
    margin:0;
    padding:0;
}
.pe-ol {
    margin-left:20px !important;
}
img {
    height: auto;
    line-height: 100%;
    outline: none;
    text-decoration: none;
}
#backgroundTable {
    height: 100% !important;
    margin: 0;
    padding: 0px;
    width: 100% !important;
}
p {
    margin: 0 0;
}
.aolReplacedBody p {
    margin:0 !important;
}
.pe-bullets p, .pe-sub-bullets p {
    margin: 0 0;
}
h1, h2, h3, h4, h5, h6 {
    color: #333333 !important;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 100% !important;
}
table td {
    border-collapse: collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
    color: black;
    text-decoration: none !important;
    border-bottom: none !important;
    background: none !important;
}
.im {
    color: black;
}
div[id="tablewrap"] {
    width: 100%;
    max-width: 740px!important;
}
div[id="tablewrap"] {
    width: 100%;
    max-width: 740px!important;
}
table[class="fulltable"], td[class="fulltd"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}
.ExternalClass * {
    line-height: 100%;
}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
    line-height: 100%;
}
.ecxoutlookcom {
    padding-top:20px;
    padding-bottom:20px;
    padding-left:30px;
    padding-right:30px;
}
.ecxoutlookcomsocial {
    padding-left:4px;
    padding-right:4px;
}
.ecxwidthfix {
    width:100% !important;
    padding-left:10px;
    padding-right:10px;
}
.ecxdisc-bg {
    background:#ffffff !important;
}
.ecxlogo-marg {
    padding-top:15px;
    padding-bottom:10px;
}
.ecxpe-headline p {
    padding-top:10px !important;
}
.ecxpe-btn {
    height:70px !important;
}
.ecxpe-ol {
    Padding-[(AlignDirection)]:20px !important;
    padding-bottom:0px !important;
    margin:0 !important;
}
.ExternalClass .ecxpe-across-image {
    padding-bottom:20px !important;
}
.ExternalClass .ecxpe-text p, .ExternalClass .ecxpe-id-details p {
    display:inline;
    line-height:200% !important;
}
.ExternalClass .ecxpe-subtitle p {
    display:inline;
    line-height:150% !important;
    padding-bottom:10px;
}
.ExternalClass .ecxpe-headline p {
    display:inline;
    line-height:120% !important;
}
.ExternalClass .ecxpe-headline {
    padding-bottom:20px !important;
}
.ExternalClass .ecxpe-subtitle {
    padding-top:10px !important;
}
.ecxpe-bullets p, .ecxpe-sub-bullets p, .ecxpe-ol p {
    display:inline !important;
}
table[class=pe-data-table] {
    background-color:#fff;
    border-collapse:collapse;
    border:none !important;
}
table[class=pe-data-table] tr {
    background-color: #f5f5f5;
}
table[class=pe-data-table] tr:nth-child(even) {
    background-color: #efefef;
}
table[class=pe-data-table] td {
    border-bottom:0 !important;
}
a[href^=tel] {
    color:#333333;
    text-decoration:none;
}
 @media screen and (max-device-width: 620px), screen and (max-width: 620px) {
.pe-split-image-con {
    padding: 0 !important;
}
img[class=pe-across-image] {
    width:auto !important;
    max-width:100% !important;
}
table[class=pe-split-image-con] {
    background: none !important;
}
td[class=pe-split-image] {
    display:block !important;
    width: 100% !important;
    float: right !important;
    padding-left: 0 !important;
}
td[class=pe-split-image] img {
    display:block !important;
    margin-bottom: 0px !important;
    margin-top: 10px !important;
    max-width: 333px !important;
}
td[id=pe-split-image-b] img {
    display:block !important;
    margin-bottom: 10px !important;
    margin-top: 0px !important;
    max-width: 333px !important;
}
table[id="backgroundTable"] {
    padding:0px!important;
}
td[class=btn-center-td] {
    text-align:center !important;
}
div[class=centering-btn], table[class=centering-btn] {
    width:100% !important;
}
table[class=btn-width] {
    text-align:center !important;
    width:100% !important;
}
table[class=pe-data-table-con] {
    width:100% !important;
}
table[class=pe-data-table] {
    width:100% !important;
}
table[class=pe-data-table] td {
    padding-left:10px !important;
    padding-right:10px !important;
    border-bottom:0 !important;
}
}
</style>
<!--Target Outlook 2007 and 2010-->
<!--[if gte mso 9]>
<style>
.pe-ol{Margin-[(AlignDirection)]:28px !important; padding-top:10px; padding-bottom:10px;}
.pe-ol td{border-bottom:1px solid #dddddd !important; border-bottom-width:1px; border-bottom-color:#dddddd; border-bottom-style:solid;}
.pe-bullets p, .pe-sub-bullets p{line-height:20px !important; margin-bottom:5px !important;}
.pe-subtitle p{margin-bottom:5px !important; }
.pe-image img{width:auto !important;  padding-bottom:20px !important; }
.pe-image{padding-bottom:15px !important;}
}
</style>
<![endif]-->
<!--Target Outlook older than 2007 and 2010-->
<!--[if lte mso 9]>
<style>
#tablewrap{width:740px !important;}
.pe-ol{Margin-[(AlignDirection)]:28px !important; padding-top:10px; padding-bottom:10px;}
.pe-ol td{border-bottom:1px solid #dddddd !important; border-bottom-width:1px; border-bottom-color:#dddddd; border-bottom-style:solid;}
.pe-bullets p, .pe-sub-bullets p{line-height:20px !important;}
.pe-subtitle p{margin-bottom:5px !important; }
.pe-image img{width:auto !important; padding-bottom:10px !important;}
}
</style>
<![endif]-->

</head>

                <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" width="90%" style="margin:0 auto;  border-top:1px solid #cccccc; padding-top:25px;" dir="[(Direction)]" class="widthfix pe-main-con">
                  <tr>
                    <td width="100%" valign="top" bgcolor="#ffffff" style="text-align:[(AlignDirection)];" class="pe-content">
  <!-- Begining of HTML content blocks -->  
  <!-- Data in Table  format -->                          
<table border="0" cellspacing="0" cellpadding="0" class="pe-data-table-con" style="padding-top:20px; padding-bottom:20px;">
  <tr>
    <td><table  border="0" cellspacing="0" cellpadding="0" style=" border-collapse:collapse; background-color:#f1f1f1;" bgcolor="#f1f1f1" dir="[(Direction)]" class="pe-data-table">
        <tr>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:bold;">1</td>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:normal;">########</td>
        </tr>
        <tr>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:bold;">2</td>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:normal;">#########</td>
        </tr>
        <tr>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:bold;">3</td>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:normal; ">#########</td>
        </tr>
        <tr>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:bold;">4</td>
          <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:normal;">#########</td>
        </tr>
      </table></td>
  </tr>
</table>

Answer 1

看看this guide to email styling。某些电子邮件客户端具有不同的格式和选择器（这很痛苦）。只有iOS，Outlook.com，Apple Mail和Android上的Gmail（但不支持桌面版）才支持用于替换颜色的:nth-child(n)伪选择器。

我建议将行样式内联，如下所示：

<tr style="text-align:[(RowColor)];">
    <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:bold;">3</td>
    <td valign="middle" style="text-align:[(AlignDirection)]; color:#333333; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px; margin:0px; padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:15px; border-bottom:1px solid #dddddd; font-weight:normal; ">#########</td>
</tr>

表格中的阴影未显示在实际电子邮件中

1 个答案: