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>

但是，当我将上面的表格放到中时，背景正在工作，但是两个表格不是彼此相邻，而是彼此下方。

是否可以使两者都在Outlook中工作？

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

我还尝试按照How do I get my two tables to align beside each other?中的说明在两个表上使用浮点数，但是在Outlook中也将其忽略。

Answer 1

您有两个选择：

使用幻影表。您的表格在Outlook中堆叠的原因是因为您不遵守表格之间的20px间隔的Outlook规则。愚蠢的规则，但这是一个已知问题。
减少表格的宽度，以遵守20px的Outlook间隔规则。因此，使两个内部表均为290px。这样，您将避免需要Ghost表。但这会影响这些表中内容的可用宽度。

老实说，Ghost表是您的最佳选择。我几乎在所有建筑中都虔诚地使用它们。这些将仅在Outlook中呈现，因此您不会在移动设备上出现响应性问题。

Answer 2

我已经接受了您的代码并对其进行了更改。

添加了一个新表来封装您的两列。
为Outlook支持添加了“幽灵”列
添加了新表以封装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中具有背景图像的两列

3 个答案: