制作HTML邮件布局时表格内文本与图片无法同行适配问题求助

HTML邮件客户端普遍对现代CSS支持度差，必须依赖原生表格属性和基础行内样式实现兼容布局，现有代码的问题主要是没有固定列宽、背景色挂载位置不对、图片存在默认间距导致错位，可按照以下规则调整：

• 给嵌套的内容表格添加width="100%"、cellpadding="0"、cellspacing="0"、border="0"属性，同时加table-layout: fixed行内样式，强制按照设定的列宽渲染，避免内容自动撑开变形
• 给两个单元格分别指定宽度：文本单元格占剩余宽度，图片单元格固定为和图片宽度一致的150px，避免宽度被内容挤压换行
• 把两个单元格的公共背景色#f7f7f7统一挂载到单元格上，不要分别挂在p标签和img标签上，避免背景出现断层
• 给图片添加display: block消除img标签默认的下方留白，添加vertical-align: middle保证图片和文本垂直居中对齐，添加border="0"兼容老版本邮件客户端
• 调整p标签的margin为0，避免浏览器默认边距导致布局错位
• 可根据需要给图片添加max-width: 100%，适配小屏幕移动端的展示效果

修改后可直接使用的代码如下：

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class="padding">
      <table class="content3" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
        <tr>
          <!-- 文本单元格，占剩余宽度 -->
          <td style="background-color: #f7f7f7; vertical-align: middle;">
            <p style="margin: 0; padding: 20px; font-size: 14px; line-height: 1.5;">
              了解如何将您的智能手表或健身手环与Vantage Fit应用同步，可点击<a href="#" style="color: #1677ff;">此处</a>查看。
            </p>
          </td>
          <!-- 图片单元格，固定150px宽度 -->
          <td width="150" style="background-color: #f7f7f7; vertical-align: middle;">
            <img src="images/smart-devices.png" width="150" border="0" style="width: 150px; max-width: 100%; display: block;" alt="智能设备">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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