使用table制作邮件布局时如何实现不同屏幕尺寸下图文排版自适应

DevOps 小满

2026-10-7

响应式邮件table布局解决方案

你可以通过内嵌媒体查询配合自定义class，实现桌面端同行、移动端堆叠的效果，具体修改如下：

第一步：添加响应式样式

在邮件HTML的<head>标签内加入如下样式：

@media only screen and (max-width: 600px) {
  /* 移动端下td转为块级元素，占满整行 */
  .responsive-col {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
  }
  /* 调整堆叠顺序，让图片显示在文本上方 */
  .img-col {
    order: -1 !important;
  }
  /* 父容器tr转为flex布局支持order调整 */
  .responsive-tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  /* 图片自适应宽度防止溢出 */
  .responsive-img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
  }
}

第二步：修改原有table代码

给tr、对应td、图片加上刚才定义的class，调整后代码如下：

<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0; padding: 50px 20px 10px;">
  <tr class="responsive-tr">
    <td valign="center" style="text-align:left;" class="responsive-col text-col">
      <h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
      <h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
    </td>
    <td valign="center" style="text-align:left;" class="responsive-col img-col">
      <img class="responsive-img" style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
    </td>
  </tr>
</table>