shade in table not showing in actual email
<p>i am using the following format as a template for sending emails with tables.
the format is suppose to change the shading between the table lines.</p>

<p>when the email is sent to Outlock or Gmail the shading switch does not show.  but when extracting the emails HTML to an online HTML editor the switch is shown.</p>

<p>Please assist.</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
#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;
}
}
&lt;/style&gt;
&lt;!--Target Outlook 2007 and 2010--&gt;
&lt;!--[if gte mso 9]&gt;
&lt;style&gt;
.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;}
}
&lt;/style&gt;
&lt;![endif]--&gt;
&lt;!--Target Outlook older than 2007 and 2010--&gt;
&lt;!--[if lte mso 9]&gt;
&lt;style&gt;
#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;}
}
&lt;/style&gt;
&lt;![endif]--&gt;

&lt;/head&gt;

                &lt;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"&gt;
                  &lt;tr&gt;
                    &lt;td width="100%" valign="top" bgcolor="#ffffff" style="text-align:[(AlignDirection)];" class="pe-content"&gt;
  &lt;!-- Begining of HTML content blocks --&gt;  
  &lt;!-- Data in Table  format --&gt;                          
&lt;table border="0" cellspacing="0" cellpadding="0" class="pe-data-table-con" style="padding-top:20px; padding-bottom:20px;"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;table  border="0" cellspacing="0" cellpadding="0" style=" border-collapse:collapse; background-color:#f1f1f1;" bgcolor="#f1f1f1" dir="[(Direction)]" class="pe-data-table"&gt;
        &lt;tr&gt;
          &lt;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;"&gt;1&lt;/td&gt;
          &lt;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;"&gt;########&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;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;"&gt;2&lt;/td&gt;
          &lt;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;"&gt;#########&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;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;"&gt;3&lt;/td&gt;
          &lt;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; "&gt;#########&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;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;"&gt;4&lt;/td&gt;
          &lt;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;"&gt;#########&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>