邮件表格border-collapse缩放时边框增大问题求助

邮件客户端对CSS的支持极其有限，border-collapse在缩放场景下的兼容性问题普遍存在，再加上不能使用内部/外部样式，必须采用全内联+HTML原生属性的方案来规避：

• 彻底放弃border-collapse，改用单元格独立边框+重复边框抵消的方案：
  1. 给<table>添加cellspacing="0" cellpadding="0"属性（优先用HTML属性而非CSS，邮件客户端兼容性更好）
  2. 为每个<td>/<th>单独设置内联边框，通过取消相邻单元格的重复边框，避免缩放时边框叠加变粗

示例代码 #

<table cellspacing="0" cellpadding="0" style="width:100%;">
  <!-- 第一行单元格：带顶部边框 -->
  <tr>
    <td style="border:1px solid #666; padding:10px;">内容1</td>
    <td style="border-top:1px solid #666; border-right:1px solid #666; border-bottom:1px solid #666; padding:10px;">内容2</td>
    <td style="border-top:1px solid #666; border-right:1px solid #666; border-bottom:1px solid #666; padding:10px;">内容3</td>
  </tr>
  <!-- 后续行单元格：取消顶部边框，保留左右下边框 -->
  <tr>
    <td style="border-left:1px solid #666; border-right:1px solid #666; border-bottom:1px solid #666; padding:10px;">内容4</td>
    <td style="border-right:1px solid #666; border-bottom:1px solid #666; padding:10px;">内容5</td>
    <td style="border-right:1px solid #666; border-bottom:1px solid #666; padding:10px;">内容6</td>
  </tr>
</table>

替代方案（内联CSS分离边框） #

如果更倾向用CSS属性，可内联border-collapse:separate和border-spacing:0，再通过取消相邻边框避免叠加：

<table style="width:100%; border-collapse:separate; border-spacing:0;">
  <tr>
    <td style="border:1px solid #666; padding:10px;">内容1</td>
    <td style="border:1px solid #666; border-left:none; padding:10px;">内容2</td>
    <td style="border:1px solid #666; border-left:none; padding:10px;">内容3</td>
  </tr>
  <tr>
    <td style="border:1px solid #666; border-top:none; padding:10px;">内容4</td>
    <td style="border:1px solid #666; border-top:none; border-left:none; padding:10px;">内容5</td>
    <td style="border:1px solid #666; border-top:none; border-left:none; padding:10px;">内容6</td>
  </tr>
</table>

注意：rules是HTML4的废弃属性，多数现代邮件客户端已不再支持，无需尝试。上述两种方案均为全内联实现，能兼容绝大多数邮件客户端，且不会出现缩放时边框变粗的问题。

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