2017-07-12 85 views
1

我在gmail的表格中存在填充问题。非常感激任何的帮助。请记住,这是一个gmail电子邮件,所以所有的css都不得不内联。谢谢!在实际电子邮件中删除了Gmail电子邮件表格填充

它看起来像这样适当填充编写的消息中: enter image description here

随后便出现去除填充在上表中实际的电子邮件: enter image description here

这是一块

<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;"> 

代码:

与在TD元件的填充代码210
<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/[email protected]" 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> 

回答

0

我只能说,多么噩梦。我不得不创建TD块空间,并完全取出填充。这是完成的代码,我不幸没有时间进行编辑,因此您可以使用工具进行比较。

成品,经过约2个小时的工作:

<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/[email protected]" 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>