如何实现桌面端Outlook邮件HTML表格内块元素自动换行？

核心问题根源 #

桌面端Outlook采用Word作为邮件渲染引擎，对display: block、display: inline-block这类CSS属性完全不识别，依赖CSS实现的自动换行逻辑在Outlook中会被直接忽略。默认渲染规则下，同一个<tr>内的所有<td>会被强制排布在同一行，总宽度不受父容器限制，最终出现块组件无限撑宽容器、不自动折行的问题。

具体适配操作 #

• 移除原有代码中所有内联的display相关样式：删掉包裹块组件的table上的display: block、每个块td上的display: inline-block。这类属性在Outlook中无实际作用，还可能导致非Outlook客户端的渲染偏差。
• 调整块组件的排布结构：不要把所有块的td放在同一个<tr>内，给每个独立块组件单独嵌套一层最小单位的table，将所有块的table作为同级元素，直接放在外层的内容容器td下。
• 利用Outlook原生支持的对齐逻辑实现自动换行：给每个独立块的table加上align="left"属性，Outlook的Word引擎会将这类块按左对齐浮动逻辑排布，当所有同级块的总宽度超过父容器可容纳范围时，会自动将超出部分的块折到下一行，和浏览器中inline-block元素的换行效果完全一致。

细节校准要点 #

• 所有块组件的table需要补充mso-table-lspace: 0; mso-table-rspace: 0;样式，消除Outlook给table默认附加的左右空白边距，避免块之间出现无意义的空隙。
• 原先针对非Outlook客户端设置的display: block、display: inline-block样式，可以通过内部<style>标签的类选择器单独启用，不要内联写在元素上，保证其他客户端的渲染效果不受影响。
• 不要给块组件设置硬编码固定宽度，让块宽度随内容自适应，Outlook才能正确计算总宽度并触发换行逻辑，适配动态增减的块组件数量。

调整后的核心结构示例 #

<tr>
 <td colspan="2" style="padding: 24px 40px 0px 40px">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0;">
    <tr>
     <td style="padding-bottom: 24px">
       <!-- 独立块1：同级左对齐排布 -->
       <table border="0" cellpadding="0" cellspacing="0" align="left" style="padding: 12px; mso-table-lspace: 0; mso-table-rspace: 0;">
         <tr><td><span>Block 1</span></td></tr>
       </table>
       <!-- 独立块2：宽度超出容器时自动折行 -->
       <table border="0" cellpadding="0" cellspacing="0" align="left" style="padding: 12px; mso-table-lspace: 0; mso-table-rspace: 0;">
         <tr><td><span>Block 2</span></td></tr>
       </table>
       <!-- 后续动态生成的块组件，直接按同级结构添加即可，无需手动计算位置 -->
     </td>
    </tr>
  </table>
 </td>
</tr>

内容的提问来源于stack exchange，提问作者Yehor Lapko