title: HTML template not getting rendered on gmail
body: <p>I have written a basic HTML template for a gmail report. The template seems to display 'Highlights' when I open it on the chrome browser but it is not displayed while using the template to send emails.</p>
  
  <p>Here is the code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;style&gt;
  
          * {
              box-sizing: border-box;
          }
          .row::after {
              content: "";
              clear: both;
              display: block;
          }
          hr {
              border: none;
              border-top: 3px solid #333;
              color: #333;
              overflow: visible;
              text-align: center;
              height: 5px;
              width:56%;
          }
  
          hr:after {
              background: #fff;
              content: 'HIGHLIGHTS';
              padding: 0 4px;
              position: relative;
              top: -13px;
              width:56%;
          }
          html {
              font-family: "Lucida Sans", sans-serif;
          }
  
          .table_data,.msg_text{
              margin-top:3%;
              margin-bottom:2%;
              height: 5%;
              width:56%;
          }
          .aside {
              background-color: #33b5e5;
              padding: 15px;
              color: #ffffff;
              text-align: center;
              font-size: 14px;
              box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
          }
          .logo{
              text-align: center;
              margin-top: 3%;
              margin-bottom: 0%;
              }
  
          .heading
          {
              font-size: 30px;
              color: blue;
              text-align: center; 
              margin-top:-2.5%; 
  
          }
          table tr th
          {
              background-color:#8e89895c;
              font-size: 18px;
              height: 40px;
          }
          table tr td
          {
              text-align: center;
              font-size: 18px;
              height: 40px;
  
          }
          /* #current_data table tr:nth-child(even) {background: #cccccc73}
          #current_data table tr:nth-child(odd) {background: #FFF}
           */
  
  
          @media only screen and (max-width: 768px) {
              /* For mobile phones: */
              [class*="col-"] {
                  width: 100%;
                  font-size: 16px;
              }
              hr {
              border: none;
              border-top: 3px solid #333;
              color: #333;
              overflow: visible;
              text-align: center;
              height: 5px;
              width:100%;
              }
  
              hr:after {
                  background: #fff;
                  content: 'HIGHLIGHTS';
                  padding: 0 4px;
                  position: relative;
                  top: -13px;
                  width:100%;
  
              }
              .table_data, .msg_text{
                  table-layout: fixed;
                  width:100% !important;
                  word-break: break-all;
              }
              .heading
              {
                  font-size: 25px;
                  color: blue;
                 text-align: center;
                 margin-top:-2.5%; 
  
              }
  
          }
  
      &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-12 right"&gt;
              &lt;div class="logo"&gt;
                  &lt;img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/smallinsisivlogo.png" width="auto" height="auto"&gt;&lt;br&gt;
              &lt;/div&gt;
              &lt;div class="heading"&gt;
                  &lt;p &gt;Your Daily Digest&lt;/p&gt; 
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;table align="center" class="top_heading"&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/right.png" width="35px" height="35px"&gt;&lt;/td&gt;&lt;td&gt;{{pass_count}} policies passed&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;img src="https://s3.amazonaws.com/aws-athena-query-results-388603454435-us-east-1/images/wrong.png" width="40px" height="40px"&gt;&lt;/td&gt;&lt;td&gt;{{failed_count}} policies failed&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-12" id="current_data"&gt;
              &lt;table align="center" class="table_data" border="1" cellpadding="2px" cellspacing="0px" style="border-color:black;border-collapse: inherit;"&gt;
                 &lt;tr&gt;
                                      &lt;th   style="font-size: 20px;background-color: gray;" &gt;Category&lt;/th&gt;
                                      &lt;th   style="font-size: 20px;background-color: gray;" &gt;Description&lt;/th&gt;
                                      &lt;th   style="font-size: 20px;background-color: gray;" &gt;Count&lt;/th&gt;
                                      &lt;th   style="font-size: 20px;background-color: gray;" &gt;Severity&lt;/th&gt;
                                      &lt;th   style="font-size: 20px;background-color: gray;" &gt;Resource Failed&lt;/th&gt;
                  &lt;/tr &gt;
                                          {% for items in Sitem %}
                                              &lt;tr&gt;
                                              &lt;td class = "c1"&gt;{{items.category_name}}&lt;/td&gt;
                                              &lt;td class = "c2"&gt;{{items.description}}&lt;/td&gt;
                                              &lt;td class = "c3"&gt;{{items.count}}&lt;/td&gt;
                                              &lt;td class = "c4"&gt;{{items.severity}}&lt;/td&gt;
                                              &lt;td class = "c5"&gt;{{items.resource}}&lt;/td&gt;
                                              &lt;/tr&gt;
                                          {% endfor %}
              &lt;/table&gt;
          &lt;/div&gt;                   
          &lt;table class="msg_text" cellpadding="2px" cellspacing="0px" align="center"&gt;        
              &lt;tr&gt;
                  &lt;td colspan="5" style="text-align: left;font-size: 12px;"&gt;&lt;p&gt;Please visit us on &lt;a .../&lt;/a&gt; for more information.This is an auto-mailer.Please do not reply to this mail.&lt;br&gt; For any clarifications and support you can contact:&lt;br&gt;+919620&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
      &lt;/div&gt;                 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here the 'Highlights' line is being displayed but it is missing while using it for the template][1]</p>
  
  <p>This is how it looks on gmail :
  [As you can see 'Highlights' is missing and the spacing is off][2]</p>