HTML表格行间出现垂直黑线如何解决？

阿华AIGC实验室

2026-4-30

解决HTML邮件表格深色模式下colspan区域出现垂直黑线的问题

我来帮你搞定这个邮件表格的深色模式黑线问题！这种情况在邮件开发里挺常见的，尤其是移动端深色模式下，邮件客户端会自作主张给表格加默认边框，而colspan合并的单元格因为结构特殊，更容易触发这个bug。

问题根源分析

你在table标签里写的border="0 !important"是无效的——HTML属性里不能用!important，而且很多邮件客户端对inline的border属性支持不好，深色模式下会忽略这个设置，强制添加边框。
部分邮件客户端（比如iOS的Mail、Gmail移动端）在深色模式下会自动给表格单元格添加边框来增强可读性，合并单元格的位置因为布局结构的变化，更容易出现这种突兀的黑线。

解决方案步骤

移除table标签里无效的!important声明，改用CSS统一控制边框
给所有<td>元素添加border:none的inline样式（邮件客户端对inline CSS支持度最高）
添加深色模式专属的媒体查询，兜底确保边框不会显示
确保border-collapse: collapse和cellspacing="0"正确设置，避免间隙导致的线条

修改后的完整代码

<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
  /* 全局表格样式重置 */
  table, td {
    border: none !important;
    border-collapse: collapse !important;
  }
  /* 深色模式兜底样式 */
  @media (prefers-color-scheme: dark) {
    table, td {
      border-color: transparent !important;
      background-color: #000; /* 可以根据你的深色背景调整，这里用黑色示例 */
    }
  }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-color: white; width: 100%;">
<table id="Table_01" width="450" height="179" border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" style="border: none !important;">
  <tr>
    <td colspan="3" style="border: none !important;">
      <img border=0 src="images/infologo.png" width="450" height="92">
    </td>
  </tr>
  <tr>
    <td style="border: none !important;">
      <img border=0 src="images/mob.png" width="165" height="25">
    </td>
    <td colspan="2" style="border: none !important;">
      <img border=0 src="images/pmob.png" width="285" height="25">
    </td>
  </tr>
  <tr>
    <td style="border: none !important;">
      <img border=0 src="images/fiks.png" width="165" height="22">
    </td>
    <td colspan="2" style="border: none !important;">
      <img border=0 src="images/social.png" width="285" height="22">
    </td>
  </tr>
  <tr>
    <td style="border: none !important;">
      <img border=0 src="images/loc.png" width="165" height="19">
    </td>
    <td style="border: none !important;">
      <img border=0 src="images/ig.png" width="151" height="19">
    </td>
    <td style="border: none !important;">
      <img border=0 src="images/fb.png" width="134" height="19">
    </td>
  </tr>
  <tr>
    <td colspan="3" style="border: none !important;">
      <img border=0 src="images/site.png" width="450" height="21">
    </td>
  </tr>
</table>
</body>
</html>