Question

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

在我的O365 Outlook桌面应用程序中，它的呈现方式是这样的，右侧有不需要的边距，即不良，并且颜色错误（我认为我可以解决）：

这是我的代码（实际上是模板，因此是{banner}）：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
        <td width="700px" 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="{Banner}" 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>

Answer 1

如果您将整个表格包装成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>

如何在Outlook中获取图片以填充表格单元格的宽度？

1 个答案: