如何设置HTML邮件表格：移动端inline-block，桌面端堆叠？

HTML邮件的响应式布局不能完全套用常规网页的CSS逻辑，多数邮件客户端（尤其是Outlook系列）对inline-block的支持极差，甚至完全不识别。针对你的问题，提供两个可行方案，按需选择：

方案一：基于表格结构的响应式调整（优先推荐） #

核心思路是用表格嵌套替代inline-block，通过媒体查询控制表格单元格的宽度与显示方式：

修改后的HTML结构示例 #

<!-- 父容器表格 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <!-- 移动端需并排的项，每项用子表格包裹 -->
    <td align="center" valign="top" class="mobile-col">
      <table width="200" border="0" cellpadding="0" cellspacing="0" class="item-table">
        <tr>
          <td>内容1</td>
        </tr>
      </table>
    </td>
    <td align="center" valign="top" class="mobile-col">
      <table width="200" border="0" cellpadding="0" cellspacing="0" class="item-table">
        <tr>
          <td>内容2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

对应的内嵌CSS（放在<head>标签内） #

@media only screen and (max-width: 600px) {
  .mobile-col {
    display: inline-block !important;
    width: 48% !important;
    padding: 0 1% !important;
  }
  .item-table {
    width: 100% !important;
  }
}

• 用!important强制覆盖邮件客户端的默认样式，确保媒体查询规则生效；
• 子表格设置width:100%，保证自适应单元格宽度；
• 加少量padding避免并排内容过度拥挤。

方案二：blockhide/blockshow双布局方案（兼容极端客户端） #

如果你的邮件需要兼容完全不支持媒体查询的客户端（比如桌面版Outlook 2010+），可以采用双布局：一套给桌面端（堆叠显示），一套给移动端（并排显示），通过媒体查询控制显示/隐藏：

HTML结构示例 #

<!-- 桌面端布局：堆叠显示 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="desktop-show">
  <tr>
    <td>内容1</td>
  </tr>
  <tr>
    <td>内容2</td>
  </tr>
</table>

<!-- 移动端布局：并排显示 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="mobile-show">
  <tr>
    <td width="50%" align="center">内容1</td>
    <td width="50%" align="center">内容2</td>
  </tr>
</table>

对应的CSS #

/* 默认显示桌面布局，隐藏移动端 */
.mobile-show {
  display: none !important;
}

@media only screen and (max-width: 600px) {
  .desktop-show {
    display: none !important;
  }
  .mobile-show {
    display: table !important;
    width: 100% !important;
  }
}

• 该方案兼容性拉满，但会增加HTML代码量，适合对兼容性要求极高的场景。

关键注意事项 #

1. 所有CSS尽量使用内嵌样式（放在<head>），不要用外部样式表，多数邮件客户端会屏蔽外部CSS；
2. 针对Outlook，需添加条件注释前缀样式，确保桌面端仍为堆叠显示：

<!--[if mso]>
<style>
  .mobile-col {
    display: block !important;
  }
</style>
<![endif]-->

3. 测试时务必使用真实邮件客户端（如Outlook、Gmail、苹果邮件），不要仅依赖浏览器预览——浏览器与邮件客户端的渲染逻辑完全不同。

内容的提问来源于stack exchange，提问作者Jared Graham