Outlook 中带有背景图像的两列

Question

我想在outlook中创建两个相邻的表格，它们应该放在一个带有背景图片的表格中。

我知道可以像这样在 Outlook 电子邮件中创建背景图片：

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="image.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
    <table width="100%" align="center"  border="0" cellpadding="0" cellspacing="0" >
        <tr>
            <td align="center">
             <!-- place content here -->
            </td> 
        </tr>
     </table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

我也知道可以像这样创建一个两列表格设计：

<table width="600" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td>
      <table class="full-width" width="295" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
          <td align="left" style="font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;">
            hi
          </td>
        </tr>
      </table>

      <table class="full-width" width="295" align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
          <td align="center">
            <img class="img-full" src="image_1.jpg" alt="img" width="295" height="250">
          </td>
        </tr>
      </table>
</table>

但是，当我将上面的表格放入<!-- place content here --> 时，后台正在工作，但这两个表格不是彼此相邻，而是彼此下方。

是否有可能让两者都在 Outlook 中工作？

我不想创建一个包含两列的表，因为它还应该是响应式的。当我有两个表时，我可以简单地使用媒体查询将表的宽度设置为 100%。

如How do I get my two tables to align beside each other? 中所述，我还尝试在两个表上使用浮点数，但这在 Outlook 中也被忽略了。

Answer 1

你有两个选择：

1. 使用幽灵表。您的表格在 Outlook 中堆叠的原因是您没有遵守 Outlook 表格之间 20 像素间隙的规则。愚蠢的规则，但这是一个已知的问题。
2. 减小表格的宽度以遵守 Outlook 规则的 20 像素间距。所以制作两个内表，290px。这样，您将避免需要 Ghost 表。但这会影响这些表格内内容的可用宽度。

老实说，Ghost 桌是您的最佳选择。我虔诚地使用它们，几乎在每个构建中。这些只会在 Outlook 中呈现，因此您不会在移动设备上遇到响应问题。

Answer 2

我已获取您的代码并对其进行了更改。

• 添加了一个新表来包含您的两列。
• 为 Outlook 支持添加了 Ghost 列
• 添加了新表格以包含 VML 和两列块
• 为您的 VML 添加了宽度和高度

@media only screen and (max-width : 480px) {
    .full-width{width:100% !important}
}

<table width="600" border="0" cellspacing="0" cellpadding="0" class="full-width">
  <tbody>
    <tr>
      <td><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;width:600px;height:250px;">
<v:fill type="frame" src="image.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
        
        <table width="600" border="0" cellpadding="0" cellspacing="0" class="full-width">
          <tr>
            <td><table class="full-width" width="300" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                  <td align="left" style="font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;"> hi </td>
                </tr>
              </table>
              
              <!--[if (gte mso 9)|(IE)]> </td><td align="left" valign="top" width="300"> <![endif]-->
              
              <table class="full-width" width="300" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                  <td align="center"><img class="img-full" src="image_1.jpg" alt="img" width="295" height="250"></td>
                </tr>
              </table>
          </tr>
        </table>
        
        <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
    </tr>
  </tbody>
</table>

我没有测试你的 VML，因为它有一个相对路径

一旦您测试了上述代码，请告诉我这是否适合您。

Answer 3

如果您仔细观察，Outlook 实际上在做的是创建一个“文本框”，并将其中的任何内容制作成图像。因此，虽然这种方法让您在 Outlook 中产生背景图像的错觉，但实际上只是一种错觉。你最好制作一个图像并使用它。这可能就是为什么你的桌子变得一团糟的原因。除了非常简单的背景图片之外，我不鼓励您使用此方法。