HTML邮件模板动态表格并排对齐失效问题排查求助

问题场景 #

要在HTML邮件模板中展示动态数据，通过循环生成指定结构的表格，期望实现并排对齐但未生效；这些子表格被放在一个父表格中（父表格代码未提供）。

原代码 #

<table align="left" style="width:50%;">
  <tr>
    <td>Name</td>
  </tr>
</table>
<table align="left" style="width:50%;">
  <tr>
    <td>Name</td>
  </tr>
</table>
<table align="left" style="width:50%;">
  <tr>
    <td>Name</td>
  </tr>
</table>

失效原因及解决方案 #

• 宽度计算溢出：每个子表格设为50%宽度，两个就占满100%容器宽度，第三个必然换行。若要每行放N个表格，需将子表格宽度设为100%/N（比如每行3个就设33.33%），同时添加box-sizing: border-box样式，避免内边距、边框撑宽表格。
• 父表格布局限制：若父表格的<td>未设置合适宽度或存在默认内边距，会挤压子表格的并排空间。建议改用表格嵌套布局：父表格创建行，每行内的<td>作为子表格的容器，每个<td>设置对应比例的宽度，将子表格放入<td>中，而非让多个表格直接左对齐。
• 邮件客户端兼容性：Outlook等客户端对CSSalign、float支持有限，优先用HTML原生的width属性控制尺寸，避免依赖CSS样式。

修正后的示例代码 #

<!-- 父表格：控制整体布局，消除默认边距 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <!-- 第一行：放2个50%宽度的子表格 -->
  <tr>
    <td width="50%" valign="top">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>Name</td>
        </tr>
      </table>
    </td>
    <td width="50%" valign="top">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>Name</td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- 第二行：放剩余的子表格，空td占位补全宽度 -->
  <tr>
    <td width="50%" valign="top">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>Name</td>
        </tr>
      </table>
    </td>
    <td width="50%" valign="top">&nbsp;</td>
  </tr>
</table>

循环生成注意事项 #

循环时需控制每行的<td>数量，比如每生成2个子表格就创建一个新的<tr>；确保父表格的cellpadding、cellspacing设为0，避免额外间距影响布局。

内容的提问来源于stack exchange，提问作者Pranay kumar