Outlook中内容TD换行时相邻TD出现水平白线问题求助

针对Outlook中表格边距单元格出现水平白线的问题，这是Word渲染引擎处理表格时的常见bug——当内容单元格高度随换行变化时，边距单元格的背景无法完全填充整行高度。以下是经过验证的修复方案：

修复方案1：给边距单元格强制设置背景与高度 #

直接修改原代码中左右边距的<td>，补充关键样式消除留白：

<table
  cellpadding="0"
  cellspacing="0"
  width="100%"
  style="border-collapse: collapse; background-color: #dadada"
>
  <tr style="height: 6px; font-size: 6px">
    <td style="line-height: 5px" colspan="3">&nbsp;</td> <!-- 修正colspan为实际单元格数量 -->
  </tr>
  <tr style="width: 100%">
    <!-- LEFT MARGIN OF CONTENT -->
    <td style="width: 12px; background-color: #dadada; height:100%; vertical-align:top">&nbsp;</td>
    <td style="font-size: 14px">{{content}}</td>
    <!-- RIGHT MARGIN OF CONTENT -->
    <td style="width: 12px; background-color: #dadada; height:100%; vertical-align:top">&nbsp;</td>
  </tr>
  <tr style="height: 6px; font-size: 6px">
    <td style="line-height: 5px" colspan="3">&nbsp;</td> <!-- 修正colspan为实际单元格数量 -->
  </tr>
</table>

关键修改说明：

• 调整上下边距行的colspan值为3（匹配内容行的单元格数量），避免无效跨列导致的渲染异常
• 给左右边距TD添加与外层表格一致的background-color，确保背景完全覆盖
• 用height:100%强制边距单元格高度填满整行
• 加vertical-align:top避免单元格内容垂直居中引发的高度留白

修复方案2：使用嵌套表格彻底隔离边距与内容 #

如果方案1仍有缩放异常，改用嵌套表格结构，通过padding替代独立边距单元格：

<table
  cellpadding="0"
  cellspacing="0"
  width="100%"
  style="border-collapse: collapse; background-color: #dadada"
>
  <tr style="height: 6px; font-size: 6px">
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td style="padding: 0 12px;"> <!-- 用padding代替左右边距TD -->
      <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
        <tr>
          <td style="font-size: 14px">{{content}}</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr style="height: 6px; font-size: 6px">
    <td>&nbsp;</td>
  </tr>
</table>

优势：

• 彻底消除多单元格行高不一致的问题，Outlook渲染更稳定
• 结构更简洁，缩放时不会出现交替白线
• 避免复杂单元格属性带来的渲染兼容问题

额外注意事项 #

• 不要使用rowspan，Outlook对跨行单元格的支持极差
• 所有样式必须内联，禁止使用外部样式表或<style>标签（Outlook条件样式除外）
• 测试时务必覆盖Outlook常用缩放比例（100%、125%、150%）

内容的提问来源于stack exchange，提问作者Aleister Crowley