Html 如何获取图像以填充表格单元格'；Outlook中的宽度是多少？

我正在尝试为电子邮件构建html。在我的浏览器Outlook客户端（和Gmail客户端）中，它呈现为这样，这是好的

在我的O365 Outlook桌面应用程序中，它的渲染方式如下：右侧有一个不需要的边距，这是不好的，颜色错误（我认为我可以修复）：

这是我的代码（它实际上是一个模板，因此是

{banner}

）：

应该与图像左对齐
应该与图像右对齐

如果您将整个表格包装为100%宽度，然后将第二张表格包装为800，如下图所示，这将删除右侧的空白

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td>
          <table width="800" border="0" cellspacing="0" cellpadding="0">
             <tr>
                <td></td>
                <td width="700" style="padding: 0; margin: 0;">
                   <div style="border: 1px solid red; padding: 0; margin: 0; background: #404040; color: white; width: 100%;">
                      <table width="100%" style="border: 1px solid red; border-spacing: 0;">
                         <tr>
                            <td colspan="4" style="border: 1px solid red; padding: 0;"><img src="..." style="margin-bottom: 0; width: 100%;"/></td>
                         </tr>
                         <tr>
                            <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; background: ">should be left-aligned with image</td>
                            <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; text-align: right;">should be right-aligned with image</td>
                         </tr>
                      </table>
                   </div>
                </td>
                <td></td>
             </tr>
          </table>
       </td>
    </tr>
</table>

应该与图像左对齐
应该与图像右对齐

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td>
          <table width="800" border="0" cellspacing="0" cellpadding="0">
             <tr>
                <td></td>
                <td width="700" style="padding: 0; margin: 0;">
                   <div style="border: 1px solid red; padding: 0; margin: 0; background: #404040; color: white; width: 100%;">
                      <table width="100%" style="border: 1px solid red; border-spacing: 0;">
                         <tr>
                            <td colspan="4" style="border: 1px solid red; padding: 0;"><img src="..." style="margin-bottom: 0; width: 100%;"/></td>
                         </tr>
                         <tr>
                            <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; background: ">should be left-aligned with image</td>
                            <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; text-align: right;">should be right-aligned with image</td>
                         </tr>
                      </table>
                   </div>
                </td>
                <td></td>
             </tr>
          </table>
       </td>
    </tr>
</table>