HTML table MS Outlook 边距问题

Question

我正在努力解决需要按原样粘贴到 Microsoft Outlook 电子邮件正文中的 HTML table。

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

Jsfiddle 如果你想复制输出：

table的代码如下：

<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 属性，这真的很烦人，原因有很多。您必须采取变通办法并使用填充或 cellpadding/cellspacing 来整理间距。

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

HTML table MS Outlook 边距问题

HTML table for MS Outlook margin issue

html

css

outlook