Salesforce Marketing Cloud中响应式表格图片三边无留白方案咨询

可以实现，你需要针对表格默认间距、单元格内边距、图片默认布局属性做几处修改即可，修改点如下：

• 清除表格默认的单元格间距：给table标签添加cellpadding="0"、cellspacing="0"属性，同时给#table的CSS规则新增border-collapse: collapse;，避免浏览器默认表格边距产生空隙。
• 重置右侧图片单元格的内边距：给存放图片的设置style="padding: 0; vertical-align: top;"，消除单元格默认内边距，同时避免垂直对齐产生的空隙。
• 消除图片默认底部留白：给#img的CSS规则新增display: block; height: 100%; width: 100%; object-fit: cover;，让图片完全撑满整个单元格，同时保留响应式特性。
• 匹配圆角样式：给#img新增border-top-right-radius: 12px; border-bottom-right-radius: 12px;，和表格的圆角效果对齐。

修改后的完整代码如下：

<style>
  #content{
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    text-align: left;
  }
  
  #table{
    background-color: #fff;  
    border-radius: 12px; 
    -moz-border-radius: 12px; 
    -webkit-border-radius: 12px; 
    box-shadow: #63666A 1px 1px 1px 1px; 
    color: black;
    border-collapse: collapse;
  }

  #title{
    font-size:20px; 
    font-weight:bold;
    color:#005da6; 
    padding-left:20px; 
    margin-top:5%;
  }
  
  #button{
    margin-left:20px; 
    padding:12px; 
    color:white; 
    background-color:#003150;
    width:35%;
    font-weight:bold;
    border-radius: 10px;
    margin-top: 10%;
    text-align:center;
  }
  
  #button a{
    color:white; 
    text-decoration: none;  
  }
  
  #button a:hover{
    color:#47a23f;
    text-decoration: none; 
  }
  
  #button a:active{
    color:#47a23f; 
    text-decoration: none; 
  }
  
  #button a:visited{
    color:white; 
    text-decoration: none; 
  }

  #img{
    max-width:100%;
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  
  .p {
    max-width:250px;
    font-weight: normal;
  }
</style>

<div id="content">
  <table id="table" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <th style="text-align: left;">
        <p id="title">Monthly tips <br> for well-being</p>
        <p style="padding: 0 20px 0 20px; font-weight:normal;" class="p">Check out our monthly newsletter for healthy living tips.</p>
        <p id="button"><a target="_blank" href="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/5f6d1181-8af5-4000-a9ba-8b1789b29f58.pdf">See Tips</a></p>
      </th>
      <th style="padding: 0; vertical-align: top;">
        <a target="_blank" href="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/5f6d1181-8af5-4000-a9ba-8b1789b29f58.pdf">
          <img id="img" src="https://image.e.activehealth.com/lib/fe3715707564077a711273/m/1/9388b441-bf80-4e2d-bc8a-34e827fb2eb6.png" alt="Tips for well-being">
        </a>
      </th> 
    </tr>
  </table>
</div>

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