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

【问题标题】：Email template table showing spacing in mobile devices显示移动设备中间距的电子邮件模板表
【发布时间】：2023-03-31 07:14:01
【问题描述】：

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

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

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

如何去除这些间距？

【问题讨论】：

标签： html-email

【解决方案1】：

**它有助于在电子邮件的<head> 中包含一些 CSS 重置。**这里有一些我使用的重点是重置 <table>s 和 <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。

【讨论】：