Outlook正在添加我不想要的正确边距

Question

我正在测试一个HTML电子邮件是...... Outlook，它在我的表格右侧添加了一个奇怪的不必要的边距。

这两个表应并排排列，400px父表中每个200px（在移动设备上折叠为200px）。

Outlook的行为的第一个线索是表格不再是并排的。选择文本后，添加的保证金清晰显示：

有什么想法吗？这是我的代码 - 你可以看到我已经尝试了几乎所有我能想到的东西!!!

<table width="400" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin-right: none; witdh: 200px">
  <tr style="border-collapse:collapse; margin-right: none; witdh: 400px">
    <td style="border-collapse:collapse; margin-right: none; witdh: 400px">

<table width="200" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; margin-right: none; witdh: 200px;">
  <tr style="border-collapse:collapse; margin-right: none; witdh: 200px">
    <td style="border-collapse:collapse; margin-right: none; witdh: 200px">Box;</td>
  </tr>
</table><table width="200" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; margin-right: none; witdh: 200px;">
  <tr style="border-collapse:collapse; margin-right: none; witdh: 200px">
    <td style="border-collapse:collapse; margin-right: none; witdh: 200px">Box;</td>
  </tr>
</table>

    </td>
  </tr>
</table>

Answer 1

这不是桌面在Outlook中的工作方式，对不起！

您需要将所有数据包含在一个表中，或者在两个表周围包装一个“超级表”

<table id="supertable">
  <tr>
    <td width="200">
      <!-- Left-hand table goes here -->
      <table>
        <tr>
          <td>Box;</td>
        </tr>
        <tr>
          <td>Box;</td>
        </tr>
      </table>
    </td>
    <td width="200">
      <!-- Right-hand table goes here -->
      <table>
        <tr>
          <td>Unsubscribe here...</td>
        </tr>
        <tr>
          <td>Change your details here...</td>
        </tr>
      </table>
    </td>
  </tr>

当谈到Outlook HTML（即世纪之交的基于表格的怪物）时，最好在方格纸上绘制你的设计，以计算出你的“网格”。然后，您可以使用colspan / rowspan元素的<td>和<tr>属性来明智地解决问题。

Answer 2

找到解决方案！我遇到了同样的问题 - 我正在关注来自Campaign Monitor的响应式布局的提示，他们并排推荐表格。另外，根据我的经验，我无法让<td>表现得像iOS Mail上的行（适用于Mobile Safari，但在电子邮件中发送时不再有效）。

更多谷歌搜索，我找到了解决方案：it involves setting borders and wrapping the content of the <td> on a <p>tag。检查第3步。它有效！