Outlook云版邮件签名嵌套表格出现1px额外边距问题求助

我用嵌套表格制作了适配Outlook云版的邮件签名HTML/CSS文件，该文件在VS Code预览及CodePen中显示完全正常，但粘贴至Outlook云版「设置>撰写和答复>邮件签名」后，所有表格及嵌套表格周围均被自动添加1px内边距或外边距，CSS重置规则完全失效。尝试调整多种CSS属性均无效果，经排查发现Outlook似乎忽略border-spacing属性，疑似该属性被强制固定为1px，即使设置border-collapse: separate并修改border-spacing值也无法解决问题。

显示效果对比 #

正常显示（VS Code/CodePen） #

Outlook云版显示效果 #

CodePen示例地址：https://codepen.io/-HigoChumbo-/pen/zYVPbNz

HTML代码 #

<table>
    <tr>
        <td>
            <table id="nested-table-left">
                <tr id="row-1-left">
                    <td>left nested table row 1 </td>
                </tr>
                <tr id="row-2-left">
                    <td>left nested table row 2</td>
                </tr>
                <tr id="row-3-left">
                    <td>
                        <table id="nested-nested-table">
                            <tr id="nested-nested-table-row-1 ">
                                <td id="nested-nested-table-row-1">nested nested table row 1</td>
                                <td class="icon-cell"><img
                                        src="https://static.vecteezy.com/system/resources/previews/012/659/360/original/geometric-square-logo-flat-simple-logo-free-vector.jpg">
                                </td>
                                <td class="icon-cell"><img
                                        src="https://static.vecteezy.com/system/resources/previews/012/659/360/original/geometric-square-logo-flat-simple-logo-free-vector.jpg">
                                </td>
                                <td class="icon-cell"><img
                                        src="https://static.vecteezy.com/system/resources/previews/012/659/360/original/geometric-square-logo-flat-simple-logo-free-vector.jpg">
                                </td>
                                <td class="icon-cell"><img
                                        src="https://static.vecteezy.com/system/resources/previews/012/659/360/original/geometric-square-logo-flat-simple-logo-free-vector.jpg">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table id="nested-table-right">
                <tr>
                    <td>right nested table row 1</td>
                </tr>
                <tr>
                    <td>right nested table row 2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS代码 #

* {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;
    border: none;
    border-spacing: 0;
    background-color: blue;
}

td {
    vertical-align: top;
}

#nested-table-left {
    min-width: 368px;
    background-color: orangered;
}

#nested-table-right {
    min-width: 180px;
    background-color: pink;
}

#nested-nested-table {
    min-width: 180px;
    background-color: lightgreen;
}

#row-1-left>td {
    height: 100px;
}

#row-2-left>td {
    height: 175px;
}

#nested-nested-table-row-1>td {
    height: 45px;
}

#nested-nested-table-row-1 {
    min-width: 168px;
}

.icon-cell {
    min-width: 50px;
}

img {
    display: block;
    min-width: 45px;
    height: 45px;
    /* vertical-align: bottom; */
}

.icon-cell>img {
    float: right;
}

内容的提问来源于stack exchange，提问作者HigoChumbo