html - 响应式电子邮件表不断中断 - 是什么原因造成的？

Question

我正在处理一个 HTML 电子邮件，它在我需要支持的多个电子邮件客户端/浏览器组合中完美运行，除了这个我无法弄清楚的问题。我有一个 600px(这是电子邮件的宽度)宽的表格，在这个表格中还有另一个表格，它由顶部和底部的“曲线”图像组成，中间有一些文本.由于此电子邮件是响应式的，因此当浏览器窗口变小时，内部灰色表格就会“中断”。我知道这一点，因为我正在使用 Litmus 测试多种浏览器/电子邮件客户端组合。

注意:这仅在电子邮件“调整大小”时发生，即仅在移动电子邮件客户端上发生。如果你看下面的 fiddle ，我正在谈论的部分是开始于 The Victims of Fraud... 的内部灰色框。这个盒子(调整大小时)不会很好玩。我已经尝试了所有我能想到的方法，使用填充、删除填充、嵌套表格以及介于两者之间的所有内容。这让我疯狂。

为了明白我的意思，打开 fiddle 然后缩小 HTML 窗口。

这里有一个 fiddle 来尝试说明我的意思:http://jsfiddle.net/39gzj/2/

更新:如果您使用 Firebug/Chrome 开发人员设置，您会发现由于某种原因，该表格将这个神奇的 2px 添加到内部灰色表格中。这是我需要根除的!

更新 2:再次尝试使用评论中发布的内容，但这同样不起作用。

http://jsfiddle.net/39gzj/2/

更新 3 - 我什至尝试使用媒体查询显式调整中间框的大小，但它仍然不起作用。这是更新的 fiddle ； http://jsfiddle.net/39gzj/5/

Answer 1

尝试像这样设置您的表格:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc" style="border-radius: 5px; padding:30px;">
  <tr>
    <td>
text here. Put this inside a container with any media queries, should always stretch to full width.
    </td>
  </tr>
</table>