Rembourrage de la table de courrier électronique Gmail en cours de suppression dans l'e-mail réel

Question

Je rencontre un problème de remplissage sur une table dans Gmail. Toute aide sera très appréciée. Rappelez-vous ceci est un email de gmail, ainsi tous les CSS doivent malheureusement être en ligne. Merci!

Il ressemble à ceci dans le message composé avec un rembourrage approprié:

Et il semble enlever le rembourrage dans sur la table dans l'e-mail réelle:

C'est le morceau de code avec le remplissage dans l'élément td:

<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;"> 

code:

<table style="max-width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" > 
      <tr> 
       <td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;"> 

       <table width="70" align="left" border="0" cellpadding="0" cellspacing="0" > 
        <tr> 
         <td height="70" style="padding: 0 20px 20px 0;"> 
          <img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue@2x-2.png" style="height: auto; "width="70" height="70" border="0" alt=""/> 
         </td> 
         <td> 
          <!--[if (gte mso 9)|(IE)]> 
          <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> 
           <tr> 
            <td> 
            <![endif]--> 
             <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px!important; width: 100%; max-width: 425px;"> 
              <tr> 
               <td height="70"> 
               <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                <tr> 
                 <td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;"> 
                  CREATING 
                 </td> 
                </tr> 
                <tr> 
                 <td style="font-size: 33px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;"> 
                  Beautiful Fitness Web Design 
                 </td> 
                </tr> 
               </table> 
               </td> 
              </tr> 
             </table> 
            <!--[if (gte mso 9)|(IE)]> 
            </td> 
           </tr> 
          </table> 
          <![endif]--> 
         </td> 
        </tr> 
       </table> 
       </td> 
      </tr> 
       </table> 

Answer 1

Tout ce que je peux dire est, quel cauchemar. Je devais créer td blocs d'espace et enlever complètement le rembourrage. C'est le code fini, je n'ai malheureusement pas le temps de faire des éditions donc vous pouvez comparer en utilisant un outil.

produit fini, après environ 2 heures de travail:

<table style="width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" > 
       <tr> 
        <td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;" > 

        <table width="70" align="left" border="0" cellpadding="0" cellspacing="0" > 
         <tr> 
          <td width="40px"> &nbsp;&nbsp;&nbsp;&nbsp; </td> 
          <td height="70" style="padding: 0 20px 20px 0;"> 
           <img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue@2x-2.png" style="height: auto; "width="70" height="70" border="0" alt=""/> 
          </td> 
          <td> 
           <!--[if (gte mso 9)|(IE)]> 
           <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> 
            <tr> 
             <td> 
             <![endif]--> 
              <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px; width: 100%; max-width: 425px;"> 

               <!-- top padding --> 
               <tr> 
                <td width="600px" height="40px"></td> 
               </tr> 

               <!-- header content --> 
               <tr> 
                <td height="70"> 
                <table width="425px" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Raleway', Helvetica, Arial, sans-serif;" > 
                 <tr> 

                  <td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;"> 
                   Creating 
                  </td> 
                 </tr> 
                 <tr> 
                  <td style="font-size: 30px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;"> 
                   Beautiful Fitness Web Design 
                  </td> 
                  <!-- <td width="20px"></td> --> 
                 </tr> 
                </table> 
                </td> 
               </tr> 

               <!-- bottom padding --> 
               <tr> 
                <td width="600px" height="40px"></td> 

               </tr> 
              </table> 
          </td> 
             <!--[if (gte mso 9)|(IE)]> 
             </td> 
            </tr> 
           </table> 
           <![endif]--> 
         </tr> 
        </table> 
        </td> 
       </tr> 
</table>