Question

我创建了一个自定义电子邮件模板，内容如下：

...
<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的表，它在桌面上正常显示，但在显示一些间距的移动设备中显示。

如上图所示，显示移动设备中的红线间距。

如何删除这些间距？

Answer 1

**在电子邮件的<head>中包含一些CSS重置是有帮助的。**以下是我使用的一些重点是重置<table>和{{的间距和边框1}} S：

<td>

这是full CSS reset I use for emails。

电子邮件模板表显示移动设备中的间距

1 个答案: