【发布时间】：2013-10-03 20:39:50
【问题描述】：
我正在构建一个基于表格的响应式电子邮件，其中包含一系列嵌套表格。我的总体布局如下所示：
用数字表示它们在 html 中的流动。
现在，在使用 Microsoft Word 引擎渲染的 Outlook '07 和 '10 中，当框 2 达到一定高度时，它似乎正在插入分页/换行符，正如建议的 here、here和here。
我说出现是因为我不知道在这些情况下查看代码的方法，因为它实际上是由 Outlook/Word 解释的。问题是，当输入此中断时，它会强制框/表 3 向下与中断平齐，如下所示：
现在，我看到的一些消息来源表明，让它在它自己完成之前就与 <tr style="page-break-before: always"> 决裂，尽管我认为这对于没有两个的人来说会更好列堆栈。
正如上面 MailChimp 文章中所建议的，我还尝试实现条件代码来定位 <br/> 元素：
<!--[if gte mso 9]>
<style type="text/css">
br { display: none;} </style>
<![endif]-->
但我没有看到任何明显的差异。我有这个布局是因为它响应迅速，并且可以折叠成一个单独的列供移动电子邮件客户端使用，如下所示：
所有这些元素也嵌套在一个更大的表格中，但我想知道我需要做的是将整个文档分成堆叠表格以避免太长，并制作一个重复的表格/框 3 以便表/框 3 将显示在两列布局中，按顺序排在第二位，保存在带有框/表 1 的表中，然后对于单列移动显示，副本将设置为显示在当前表下方/box 2，但这会打乱我的布局并且需要对两个位置进行相同的更新。
当前使用align: 属性设置表。
那么，有没有一种方法可以让 Outlook 不破坏表格，或者在不改变文档架构的情况下使其看起来相同？
【问题讨论】：
标签： html css email outlook responsive-design