仅表格表头设置圆角：Outlook桌面端定价计划邮件HTML模板适配问题

你要实现的仅表头带圆角的效果对应下图：

Outlook桌面端（2013及以上版本）使用Microsoft Word作为HTML渲染内核，原生对CSS border-radius 属性支持极差，常规给表头单元格加圆角的写法仅能在浏览器端邮件服务生效，无法在Outlook桌面端正常显示，可采用以下方案兼容：

方案1：拆分表格+VML圆角（全版本兼容） #

将表头和表体拆分为独立逻辑块，用VML（Office专属矢量标记语言）实现Outlook端的圆角效果，同时保留标准CSS写法适配其他邮件客户端，示例代码如下：

<!-- 整体容器表格，固定宽度避免Outlook自动拉伸 -->
<table width="600" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <!-- 表头区域 -->
  <tr>
    <!-- 左上角圆角单元格 -->
    <td width="10" height="40" style="background: #2563eb; border-top-left-radius: 8px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="#2563eb" style="width:10px;height:40px;" arcsize="20%" stroked="f"></v:roundrect>
      <![endif]-->
    </td>
    <!-- 表头内容单元格 -->
    <td width="580" height="40" align="center" style="background: #2563eb; color: #fff; font-weight: bold; font-size: 16px;">
      月度定价计划
    </td>
    <!-- 右上角圆角单元格 -->
    <td width="10" height="40" style="background: #2563eb; border-top-right-radius: 8px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" fillcolor="#2563eb" style="width:10px;height:40px;" arcsize="20%" stroked="f"></v:roundrect>
      <![endif]-->
    </td>
  </tr>
  <!-- 表体区域，和表头无缝拼接 -->
  <tr>
    <td colspan="3" style="padding: 0;">
      <table width="600" cellpadding="12" cellspacing="0" border="1" bordercolor="#e5e7eb" role="presentation">
        <tr>
          <td width="50%">基础版</td>
          <td width="50%" align="right">¥39/月</td>
        </tr>
        <tr>
          <td>专业版</td>
          <td align="right">¥99/月</td>
        </tr>
        <tr>
          <td>企业版</td>
          <td align="right">¥299/月</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

注意事项： #

• VML的arcsize属性取值范围为0-1，对应圆角半径和单元格高度的比值，比如40px高的单元格要做8px圆角，arcsize设为20%即可
• 所有表格必须添加cellpadding="0" cellspacing="0" border="0"初始化属性，避免Outlook默认插入多余边距
• 不要使用overflow: hidden属性，Outlook渲染内核完全不支持该属性，无法实现裁切效果
• 如果不想使用VML语法，也可以将表头左右两个圆角切为对应背景色的PNG图片，放入左右两侧单元格，兼容性更稳定

方案2：MSO专属属性（适配Outlook 2016及以上版本） #

如果不需要兼容2016以下的老版本Outlook，也可以直接使用Outlook专属的mso-border-radius-alt系列属性，和标准CSS圆角属性配合使用即可：

.table-header {
  /* 标准写法适配其他邮件客户端 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  /* Outlook专属写法 */
  mso-border-radius-alt-top-left: 8px;
  mso-border-radius-alt-top-right: 8px;
  background-color: #2563eb;
  color: #fff;
}

该写法代码量最少，但老版本Outlook兼容性不足，建议和方案1的拆分表格逻辑搭配使用。

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