HTML响应式邮件流体表格两列转单列及边框切换实现咨询

实现方案 #

核心思路是使用邮件客户端兼容的内嵌媒体查询，通过类名控制不同屏幕尺寸下的单元格样式，无需固定宽度即可实现布局和分割线的切换，适配95%以上的主流邮件客户端。

第一步：在邮件<head>中添加媒体查询样式 #

<head>
  <style type="text/css">
    /* 适配移动端屏幕，触发宽度可根据需求自行调整 */
    @media only screen and (max-width: 480px) {
      .left-col {
        width: 100% !important;
        display: block !important;
        /* 移除桌面端垂直边框，替换为水平分割边框 */
        border-right: none !important;
        border-bottom: 1.5px solid #d0d0d0 !important;
        text-align: left !important;
        /* 调整内边距适配移动端排版 */
        padding-right: 0 !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
      }
      .right-col {
        width: 100% !important;
        display: block !important;
        padding-left: 0 !important;
      }
    }
  </style>
</head>

第二步：修改原有表格代码，添加类名 #

仅需要给两列的td添加对应类名即可，其余原有逻辑保持不变：

<table cellpadding="5" cellspacing="0"
    style="background-color:#F6F6F6; font-size: 14px; color:#58595b; width:100%; border-collapse:collapse;">
    <tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;">&nbsp;</td></tr>
  <tr>
    <td valign="top" class="left-col" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;">
      Start point
    </td>
    <td valign="top" class="right-col" style="padding-left:40px; vertical-align:top;">
      <strong>Fri, January 12, 2023 12:00</strong>
      <br />
      Harbour, Seatown
    </td>
  </tr>
  <tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;">&nbsp;</td></tr>
  <tr>
    <td valign="top" class="left-col" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;">
      End point
    </td>
    <td valign="top" class="right-col" style="padding-left:40px; vertical-align:top;">
      <strong>So, January 18, 2023 10:00</strong>
      <br />
      Central Station, Capital
    </td>
  </tr>
  <tr><td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;">&nbsp;</td></tr>
</table>

效果说明 #

• 桌面端：完全保留原有两列布局+垂直右侧分割线的样式，全程使用百分比宽度，无固定宽度限制，适配不同尺寸的桌面端容器
• 移动端（宽度小于480px）：单元格自动变为块级元素堆叠成单列，原有垂直右边界替换为水平下边界作为分割线，文字对齐方式、内边距同步适配移动端阅读习惯

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