border-collapse 只对 table 元素生效，设于 td/tr 无效；启用后相邻边框按宽度、样式、声明顺序优先级合并，border-spacing 失效，外边框需通过 td/th 设置。

border-collapse 必须写在 table 元素上才生效

很多人给 td 或 tr 加 border-collapse: collapse，结果边框纹丝不动——这个属性只对 table 生效，浏览器会直接忽略写在其他标签上的声明。

常见错误现象包括：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 明明写了 collapse 却还是双线、白缝、错位
• 用行内样式时写成 <td style="border-collapse: collapse">，完全无效<li>被 UI 框架或 CSS 重置库（如 <code>normalize.css）默认设为 separate，却没覆盖

正确写法只有两种：

• CSS 中：table { border-collapse: collapse; }
• 行内样式：<table style="border-collapse: collapse"> <h3>启用 <code>border-collapse: collapse 后，相邻边框按规则“胜出”

  合并不是叠加，也不是取平均，而是浏览器根据三重优先级选出一条边框来渲染：

  • 宽度最大者胜出（2px > 1px）
  • 样式更实者胜出（solid > dashed > dotted）
  • 颜色不同时，后声明的 CSS 规则优先（注意源码顺序和选择器权重）

  例如：

  th { border-bottom: 2px solid #333; }
  td { border-top: 1px solid #666; }

  最终横向边框显示为 2px solid #333。但如果把 td 的样式写在 CSS 文件靠后位置，且宽度相同、样式相同，它的颜色就可能覆盖 th 的。

  特别注意：border: none 不参与合并计算，会被其他方向的边框“穿透”显示。

  border-spacing 在 collapse 模式下自动失效

  border-collapse: collapse 和 border-spacing 是互斥开关。只要设了 collapse，border-spacing 值就被忽略，无论你写 border-spacing: 0 还是 border-spacing: 10px 都没区别。

  所以别这么写：

  table {
    border-collapse: collapse;
    border-spacing: 0; /* 冗余，删掉 */
  }

  视觉上还有“缝隙”？那大概率是 padding 撑开的，不是边框间距。统一清空 td, th { padding: 0; } 再观察真实贴合效果。

  想突出某行/某列边框，不能操作 tr，得从 td/th 入手

  tr 上设 border 在 collapse 模式下基本无效，浏览器不渲染它。真正起作用的是单元格自身的单边边框。

  典型做法：

  • 第一行加顶边框：tr:first-child td, tr:first-child th { border-top: 2px solid #333; }
  • 最后一列加右边框：td:last-child, th:last-child { border-right: 2px solid #333; }
  • 去掉外边框只留内线：table { border: none; } td, th { border: 1px solid #ccc; }

  注意：首尾单元格可能多出半条线，用 :first-child 或 :last-child 微调即可，比如 td:first-child { border-left: none; }。

  最常被忽略的一点是：合并后 table 的总宽度 ≠ 所有 td 宽度之和 + 边框 × 2，因为内部边框被共享了，只算一次。做精确尺寸控制时得留心这点。