Search code examples
htmlemailgmailhtml-emailemail-templates

Gmail - HTML classes and style tags are removed inside table


My email template has classes for html elements and also style tag added inside table. And the CSS customization for the table is done using class selectors.

When tested in Gmail web version the styles are not applied also the classes and styles are not available in the rendered DOM. (It works fine in outlook though)

Is there a documentation from Google that they will strip off html classes and style tags?

Also if this is the case with Gmail please suggest any alternate solution. Please don't suggest inline css as we use jsp template and the contents are rendered dynamically.

Sample html template:

<table class="layoutTable">
   <tbody>
      <tr>
         <td class="layoutLeft" rowspan="3"></td>
         <td class="layoutTop"></td>
         <td class="layoutRight" rowspan="3"></td>
      </tr>
      <tr>
         <td class="layoutBody">
            <style type="text/css">BODY {
               FONT-SIZE: 70%; FONT-FAMILY: inherit; COLOR: #000000
               }
               TEXTAREA {
               FONT-SIZE: 70%; FONT-FAMILY: inherit; COLOR: #000000
               }
               BODY {
               FONT-SIZE: 14px; FONT-FAMILY: "Helvetica", Arial, sans-serif; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #f8f8f8
               }
            </style>
            <table class="tableEmailText" cellspacing="0" cellpadding="0" border="0">
               <tbody>
                  <tr>
    
    

Rendered DOM in Gmail:

<table>
   <tbody>
      <tr>
         <td rowspan="3">
         </td>
         <td>
         </td>
         <td rowspan="3">
         </td>
      </tr>
      <tr>
         <td>
            <table border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <th>

Solution

  • There are different versions of Gmail, but yes it is common to see it strip embedded CSS. You must refactor your code to inline the styles. See HTML email in Gmail - CSS style attribute removed Why is Gmail blocking CSS in emails? or Styles not working in Gmail