Outlook桌面端表格下边框随机显示异常问题求助

表格下边框缺失，该边框会在滚动页面或打开/关闭Outlook应用时随机出现。此问题仅出现在Outlook桌面端，浏览器端显示正常。在React项目中生成带数据的表格并发送邮件，查看邮件时出现此问题，Yahoo、Gmail等邮箱显示正常。

Outlook桌面端依赖Word渲染引擎，对HTML/CSS的支持逻辑和普通浏览器差异极大，针对这个边框问题可以尝试以下几种针对性方案：

• 给每个单元格单独设置内联边框：
  不要只依赖表格的border-collapse和整体边框配置，直接给所有<td>、<th>元素添加底部边框的内联样式，且边框必须用像素单位。示例代码：

  <table style="border-collapse: collapse; width: 100%;">
    <tr>
      <td style="border-bottom: 1px solid #000; padding: 8px;">单元格内容</td>
      <td style="border-bottom: 1px solid #000; padding: 8px;">单元格内容</td>
    </tr>
  </table>
  

• 用Outlook专属条件注释强制样式：
  在邮件HTML的<head>中添加仅Outlook能识别的条件样式，强制表格固定布局并锁定边框：

  <!--[if mso]>
  <style type="text/css">
    table {
      border-collapse: collapse !important;
      table-layout: fixed !important;
    }
    td, th {
      border-bottom: 1px solid #000 !important;
    }
  </style>
  <![endif]-->
  

• 彻底放弃CSS类，全部用内联样式：
  Outlook对外部样式表、<style>标签里的类选择器支持极差，所有样式直接写在元素的style属性里，避免样式被忽略。

• 用替代元素模拟边框：
  如果以上方法都无效，可以在表格下方加一个高度1px的<div>模拟下边框，颜色和表格边框保持一致：

  <table style="border-collapse: collapse; width: 100%;">
    <!-- 表格内容 -->
  </table>
  <div style="width: 100%; height: 1px; background: #000; margin: 0;"></div>
  

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