MS Outlook margin 问题的 HTML 表格

Question

正在处理需要按 Microsoft Outlook 电子邮件正文粘贴的 HTML 表格。

当我复制 html 输出并将其粘贴到电子邮件正文中时，您会注意到表 1 和表 2 周围的边距消失了。由于某种原因，它仍然出现在表 3 和表 4 之间。您知道这里发生了什么以及我该如何修复它吗？

Jsfiddle 如果你想复制输出:

http://jsfiddle.net/Guill84/k6eevtyL/

该表的代码如下:

<table cellpadding="10" cellspacing="0">
    <TD valign="top">
        <table cellpadding="3" cellspacing="0" style="border: 2px dotted #c0c0c0; width:250px;margin-bottom:10px">
            <TD>1st Table</TD>
            <TR>
                <TD>1st Table</TD>
            </TR>
        </table>
        <table cellpadding="3" cellspacing="0" style="border: 2px dotted #c0c0c0; width:250px">
            <TD>2nd Table</TD>
            <TR>
                <TD>2nd Table</TD>
            </TR>
        </table>
    </TD>
    <TD valign="top">
        <table cellpadding="3" cellspacing="0" style="border: 2px dotted #c0c0c0; width:250px;margin-bottom:10px">
            <TD>3rd Table</TD>
            <TR>
                <TD>3rd Table</TD>
            </TR>
        </table>
        <table cellpadding="3" cellspacing="0" style="border: 2px dotted #c0c0c0; width:250px">
            <TD>4th Table</TD>
            <TR>
                <TD>4th Table</TD>
            </TR>
        </table>
    </TD>
</table>

Answer 1

outlook 不支持 margin CSS 属性，这确实很烦人，原因有很多。您必须采取解决方法并使用 padding 或 cellpadding/cellspacing 来整理间距。

以下是每个邮件客户端中可用的 CSS 属性指南:https://www.campaignmonitor.com/css/