电子邮件模板表，示间距

我创建了一个自定义的电子邮件模板和含量低于：电子邮件模板表，示间距

... 
<table id="Table_01" width="70%" border="0" cellpadding="0" cellspacing="0" style=" backgroud:red;border-collapse: collapse;border-spacing: 0;"> 
    <tr> 
     <td valign="top"> 
      <img style="display:block; border: 0px;width:100%;" src="images/01.png" alt=""> 
     </td> 
    </tr> 
    <tr> 
     <td valign="top"> 
      <table id="Table_02" width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;border-spacing: 0;"> 
       <tr> 
        <td> 
         <img style="display:block; border: 0px;width:100%;" src="images/02_01.png" alt=""> 
        </td> 
        <td > 
         <img style="display:block; border: 0px;width:100%;" src="images/02_03.png" alt=""> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td valign="top"> 
      <img style="display:block; border: 0px;width:100%;" src="images/03.png" alt=""> 
     </td> 
    </tr> 
</table> 
...

上面的代码创建的表有三个tr并正确显示在桌面上，但在移动设备显示一些间距。

如示出在移动设备中的红色行间距上述图像表。

如何去除这些间距？

来源

2016-09-23 Vinaya Maheshwari

**它有助于在电子邮件中包含的<head>几个CSS重置**这里有几个，我用专注于复位间距和<table>的边境和<td> S：

<head> 
    <style> 
     /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ 
     table { 
      border-spacing: 0 !important; 
      border-collapse: collapse !important; 
      table-layout: fixed !important; 
      margin: 0 auto !important; 
     } 
     table table table { 
      table-layout: auto; 
     } 

     /* What it does: Stops Outlook from adding extra spacing to tables. */ 
     table, 
     td { 
      mso-table-lspace: 0pt !important; 
      mso-table-rspace: 0pt !important; 
     } 
    </style> 
</head>

这是full CSS reset I use for emails。

来源

2016-09-26 14:01:23

电子邮件模板表，示间距

回答

相关问题