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

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

html

Html 表中的阴影未在实际电子邮件中显示,html,Html,我使用以下格式作为发送带有表格的电子邮件的模板。假定该格式更改表格行之间的着色当电子邮件发送到Outlock或Gmail时，阴影开关不显示。但是，当将电子邮件HTML提取到在线HTML编辑器时，会显示开关请帮忙 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #outl

我使用以下格式作为发送带有表格的电子邮件的模板。假定该格式更改表格行之间的着色

当电子邮件发送到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>


#展望a{
填充：0；
}
身体{
宽度：100%！重要；
背景色：#ffffff；
-webkit文本大小调整：无；
-ms文本大小调整：无；
保证金：0；
填充：0；
}
.ReadMsgBody{
宽度：100%；
}
.外部类{
宽度：100%；
}
ol li，ol li p{
保证金：0；
填充：0；
}
P.ol{
左边距：20px！重要；
}
img{
高度：自动；
线高：100%；
大纲：无；
文字装饰：无；
}
#背景表{
身高：100%！重要；
保证金：0；
填充：0px；
宽度：100%！重要；
}
p{
利润率：0；
}
.aolReplacedBody p{
边距：0！重要；
}
.pe项目符号p、.pe子项目符号p{
利润率：0；
}
h1、h2、h3、h4、h5、h6{
颜色：#333333！重要；
字体系列：Arial、Helvetica、无衬线字体；
线高：100%！重要；
}
表td{
边界塌陷：塌陷；
}
.yshortcuts、.yshortcuts a、.yshortcuts a:链接、.yshortcuts a:访问、.yshortcuts a:悬停、.yshortcuts a:跨距{
颜色：黑色；
文字装饰：无！重要；
边框底部：无！重要；
背景：无！重要；
}
.im{
颜色：黑色；
}
div[id=“tablewrap”]{
宽度：100%；
最大宽度：740px！重要；
}
div[id=“tablewrap”]{
宽度：100%；
最大宽度：740px！重要；
}
表[class=“fulltable”]，td[class=“fulltd”]{
最大宽度：100%！重要；
宽度：100%！重要；
高度：自动！重要；
}
.外部类*{
线高：100%；
}
.ExternalClass p、.ExternalClass span、.ExternalClass字体、.ExternalClass td{
线高：100%；
}
.ecxoutlookcom{
填充顶部：20px；
垫底：20px；
左侧填充：30px；
右侧填充：30px；
}
.ecxoutlookcomsocial{
左侧填充：4px；
右侧填充：4px；
}
.ecxwidthfix{
宽度：100%！重要；
左侧填充：10px；
右边填充：10px；
}
.ecxdisc bg{
背景：#ffffff！重要；
}
.ecxlogo marg{
填充顶部：15px；
垫底：10px；
}
.ecxpe标题p{
填充顶部：10px！重要；
}
.ecxpe btn{
高度：70px！重要；
}
.ecxpe ol{
填充-[（对齐方向）]：20px！重要；
填充底部：0px！重要；
边距：0！重要；
}
.ExternalClass.ecxpe跨映像{
填充底部：20px！重要；
}
.ExternalClass.ecxpe文本p、.ExternalClass.ecxpe id详细信息p{
显示：内联；
线高：200%！重要；
}
.ExternalClass.ecxpe副标题p{
显示：内联；
线高：150%！重要；
垫底：10px；
}
.ExternalClass.ecxpe标题p{
显示：内联；
线高：120%！重要；
}
.ExternalClass.ecxpe标题{
填充底部：20px！重要；
}
.ExternalClass.ecxpe副标题{
填充顶部：10px！重要；
}
.ecxpe项目符号p、.ecxpe子项目符号p、.ecxpe ol p{
显示：内联！重要；
}
表[类别=pe数据表]{
背景色：#fff；
边界塌陷：塌陷；
边界：没有！重要；
}
表[class=pe数据表]tr{
背景色：#F5；
}
表[class=pe数据表]tr:n个子项（偶数）{
背景色：#EFEF；
}
表[class=pe数据表]td{
边框底部：0！重要；
}
a[href^=tel]{
颜色：#333333；
文字装饰：无；
}
@媒体屏幕和（最大设备宽度：620px）、屏幕和（最大宽度：620px）{
.pe分割图像控制器{
填充：0！重要；
}
img[类别=图像中的pe]{
宽度：自动！重要；
最大宽度：100%！重要；
}
表[class=pe分割图像con]{
背景：无！重要；
}
td[类别=pe分割图像]{
显示：块！重要；
宽度：100%！重要；
浮子：对！很重要；
左侧填充：0！重要；
}
td[类别=pe分割图像]图像{
显示：块！重要；
页边距底部：0px！重要；
利润上限：10px！重要；
最大宽度：333px！重要；
}
td[id=pe-split-image-b]img{
显示：块！重要；
边缘底部：10px！重要；
边际顶部：0px！重要；
最大宽度：333px！重要；
}
表[id=“backgroundTable”]{
填充：0px！重要；
}
td[等级=btn中心td]{
文本对齐：居中！重要；
}
div[class=定心btn]，table[class=定心btn]{
宽度：100%！重要；
}
表[类别=btn宽度]{
文本对齐：居中！重要；
宽度：100%！重要；
}
表[class=pe数据表con]{
宽度：100%！重要；
}
表[类别=pe数据表]{
宽度：100%！重要；
}
表[class=pe数据表]td{
左侧填充：10px！重要；
右边填充：10px！重要；
边框底部：0！重要；
}
}
1.
########
2.
#########
3.
#########
4.
#########

看一看。某些电子邮件客户端允许使用不同的格式和选择器（这很痛苦）。只有iOS、Outlook.com、Apple Mail和Android上的Gmail（但不支持桌面）才支持用于替换颜色的第n个子（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>


3.
#########