0

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

这两个表应该并排排列，每个 200 像素在一个 400 像素的父表中（在移动设备上折叠到 200 像素）。

Outlook 行为的第一个线索是表格不再并排。And when the text is selected the added margin is clearly showing:

在此处输入图像描述

有什么想法吗？这是我的代码 - 正如你所看到的，我已经尝试了几乎所有我能想到的！

<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>
4

2 回答 2

2

这不是表格在 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>

于 2013-01-24T16:20:21.283 回答
0

找到了解决方案！我遇到了同样的问题 - 我正在遵循 Campaign Monitor 的响应式布局提示，他们确实推荐并排的表格。此外，根据我的经验，我无法<td>在 iOS Mail 上表现得像行（在 Mobile Safari 上工作，但在通过电子邮件发送时不再工作）。

再用谷歌搜索，我找到了一个解决方案：它涉及设置边框和包装标签<td>上<p>的内容。检查第 3 步。它有效！

于 2013-04-10T14:53:04.683 回答