outlook中具有背景图像的两列

我想在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>

然而，当我把上面的表格放进去时，背景就起作用了，但是这两个表格不是相邻的，而是在彼此下面

是否可以在outlook中同时使用这两种功能

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

---

我还尝试在两个表上使用浮动，如中所述，但在Outlook中也忽略了这一点。

如果仔细观察，Outlook实际上正在创建一个文本框，其中的任何内容都会生成一个图像。所以，虽然这种方法给你的是outlook中背景图像的错觉，但实际上只是一种错觉。你最好制作一个图像并使用它。这可能就是为什么你的桌子变得乱七八糟的原因。我不鼓励您将此方法用于非常简单的背景图像以外的任何内容。

您有两种选择：

使用鬼表。您的表在Outlook中堆叠的原因是，您没有遵守Outlook的表间距为20px的规则。愚蠢的规则，但这是一个已知的问题。 减少表格的宽度，以遵守20px差距Outlook规则。因此，制作两个内部表格，290px。这样，您将避免需要幽灵表。但这会影响这些表中内容的可用宽度。

---

老实说，鬼桌是你最好的选择。我虔诚地使用它们，几乎在每一个版本中。这些将仅在Outlook中呈现，因此您在移动设备上不会出现响应问题。

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

添加了一个新表以封装两列。 为Outlook支持添加了Ghost列 添加新表以封装VML和两列块 增加了VML的宽度和高度 @仅介质屏幕，最大宽度：480px{ .全宽{宽度：100%！重要} } 你好

---

从上面的链接中选择的答案是使用float，并非所有电子邮件客户端都正确读取float。@Syfer float在背景图像解决方案中也不起作用是的，这就是我建议使用ghost列的原因。您可以控制表列和行的外观。@Syfer ghost columns对我来说不是选项，因为我在2019年需要响应，正如我的问题中提到的。您可以使用ghost columns和CSS，您可以针对这些列并使其响应。我需要2019年的响应性在上面的描述中没有说？所以你说不可能有一个背景图像和两个响应列？不是真的。正如我在回答中提到的，这可以通过使用ghost表来实现。“重影表”是一种手持Outlook的方法，它可以使您的代码尽可能接近预期效果。从未听说过Outlook差距。但是，即使我将父表的宽度设置为2000px，它们仍然不是相邻的，而是堆叠的。是的，这是一个愚蠢的问题，也是人们研究、试验并发现幽灵表修复方法的原因之一。好吧，那么背景代码是在玩愚蠢的窃听器，即使你做的每件事都是正确的，这种情况也可能发生。您最好将这两个表都包装在ghost表中，然后看看会发生什么。如果这不能解决问题，我会非常惊讶。如果不这样做，这将指向代码库中需要识别和修复的更大问题。