電子郵件模板表，示間距

我創建了一個自定義的電子郵件模板和含量低於：電子郵件模板表，示間距

... 
<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

電子郵件模板表，示間距

回答

相關問題