HTML邮件模板卡片式表格布局行对齐问题修复咨询

问题背景 #

首次制作HTML邮件模板，采用Table布局时出现文本内容较长导致卡片对应行错位的问题——长文本所在的卡片行高被拉长，与其他卡片的同类型行无法对齐。以下是两张卡片的原始代码：

<table class="table_scale" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate;
                                border-spacing: 30px;
                                *border-collapse: expression('separate', cellSpacing='30px');">
  <tr>
    <td style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -34% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            E-mail marketing
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Crée votre Site Web personnalisé
          </td>
        </tr>
      </table>
    </td>
    <td style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -33% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            Facebook Ads
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Lancer votre publicité sur Facebook &amp; Instagram
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

解决方法 #

1. 快速修复：设置单元格垂直对齐 #

给包含卡片的外层<td>添加vertical-align: top;样式，强制所有卡片从顶部开始布局，避免因内容高度差异导致的错位。这是最简便的解决方案，兼容所有邮件客户端。

修改后的代码：

<table class="table_scale" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate;
                                border-spacing: 30px;
                                *border-collapse: expression('separate', cellSpacing='30px');">
  <tr>
    <!-- 添加vertical-align: top -->
    <td style="background-color: #fff; padding: 20px; border-radius: 20px; vertical-align: top;">
      <table style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -34% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            E-mail marketing
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Crée votre Site Web personnalisé
          </td>
        </tr>
      </table>
    </td>
    <!-- 添加vertical-align: top -->
    <td style="background-color: #fff; padding: 20px; border-radius: 20px; vertical-align: top;">
      <table style="border-collapse: separate;border-spacing: 0 10px;">
        <tr>
          <td style="background-color:  #0C49F6; font-style: normal;
                                                    font-weight: 500;
                                                    font-size: 25px;
                                                    color: #FFFFFF; padding: 15px 25px; border-radius: 15px;
                                                    text-align: center;">
            -33% de réduction
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 700;
                                                    font-size: 20px;
                                                    color: #1B0F66;">
            Facebook Ads
          </td>
        </tr>
        <tr>
          <td style="font-style: normal;
                                                    font-weight: 400;
                                                    font-size: 19px;
                                                    color: #8C8A8A;">
            Lancer votre publicité sur Facebook &amp; Instagram
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

2. 进阶方案：采用横向Table结构（严格行对齐） #

如果需要让卡片的每一行（折扣栏、标题栏、描述栏）完全对齐，可将同一类别的内容放在同一个<tr>下的<td>中，利用Table的天然行对齐特性解决问题。这种方案兼容性更强，适合对布局精度要求高的场景。

示例代码：

<!-- 外层卡片容器，实现白色背景和间距 -->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: separate; border-spacing: 30px;">
  <tr>
    <!-- 第一个卡片 -->
    <td style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; border-spacing: 0 10px; width: 100%;">
        <!-- 折扣行 -->
        <tr>
          <td style="background-color: #0C49F6; font-weight: 500; font-size: 25px; color: #FFFFFF; padding: 15px 25px; border-radius: 15px; text-align: center;">
            -34% de réduction
          </td>
        </tr>
        <!-- 标题行 -->
        <tr>
          <td style="font-weight: 700; font-size: 20px; color: #1B0F66;">
            E-mail marketing
          </td>
        </tr>
        <!-- 描述行 -->
        <tr>
          <td style="font-weight: 400; font-size: 19px; color: #8C8A8A;">
            Crée votre Site Web personnalisé
          </td>
        </tr>
      </table>
    </td>
    <!-- 第二个卡片 -->
    <td style="background-color: #fff; padding: 20px; border-radius: 20px;">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; border-spacing: 0 10px; width: 100%;">
        <!-- 折扣行 -->
        <tr>
          <td style="background-color: #0C49F6; font-weight: 500; font-size: 25px; color: #FFFFFF; padding: 15px 25px; border-radius: 15px; text-align: center;">
            -33% de réduction
          </td>
        </tr>
        <!-- 标题行 -->
        <tr>
          <td style="font-weight: 700; font-size: 20px; color: #1B0F66;">
            Facebook Ads
          </td>
        </tr>
        <!-- 描述行 -->
        <tr>
          <td style="font-weight: 400; font-size: 19px; color: #8C8A8A;">
            Lancer votre publicité sur Facebook &amp; Instagram
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

3. 补充优化：设置单元格最小高度 #

如果希望同一类别的单元格高度完全一致，可给每个内容行的<td>添加min-height样式（根据字体大小和padding计算合适值），例如：

• 折扣栏：min-height: 70px;
• 标题栏：min-height: 40px;

这能确保即使内容长度不同，单元格高度保持统一，进一步强化对齐效果。

内容的提问来源于Stack Exchange，提问作者Noor Gag