border-collapse: collapse必须写在table元素上才生效，写在td、tr或div上无效；它与border-spacing互斥，合并边框按宽度>样式实度>声明顺序优先级胜出。

border-collapse 不是“边框层叠”，而是边框合并——这个词本身容易误导，很多人照着字面理解去“叠”边框，结果越调越乱。

必须写在 table 元素上，且只对 table 生效；其他地方加了等于没加。

---

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

• 写在 td、tr、外层 div 或全局选择器里，浏览器直接忽略
• 正确写法只有两种：
  • 内联：<table style="border-collapse: collapse"> <li>CSS：<code>table { border-collapse: collapse; }
  • 如果用了 Ant Design、Bootstrap 等框架，它们的重置样式可能覆盖你的声明，可临时加 !important 验证，但长期应提高选择器权重（比如 .my-table table { ... }）

  ---

  合并后边框粗细/颜色不对？其实是边框“竞争规则”在起作用

  border-collapse: collapse 不是简单把两个边框“压成一条”，而是按优先级取胜：

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载
  • 宽度优先：2px > 1px
  • 样式次之：solid > dashed > dotted
  • 声明顺序最后：后写的 CSS 规则更可能生效

  常见现象：

  • th 设了 2px solid red，td 是 1px solid #666，但表头下边线却显示为 1px —— 因为 td 的上边框和 th 的下边框重叠，而 td 的规则在 CSS 中靠后且宽度更小，但样式/颜色未占优，最终取了 td 的边框
  • 想让表头线显眼？统一设：th, td { border: 1px solid #ccc; }
  • 要强制某条线加粗（比如首行底边），用单边控制：th:first-child { border-bottom: 2px solid #333; }，并确保选择器权重足够

  ---

  加了 collapse 还有间隙？检查这三个干扰项

  • border-spacing：只要用了 collapse，这个属性就完全失效；但如果你在别处写了 border-spacing: 2px，它会悄悄把 border-collapse 降级回 separate
  • display: block 或 inline-block：现代浏览器中，border-collapse 只在 display: table（及其变体如 table-cell）下有效；给 table 设了 display: block，等于直接废掉该属性
  • 外层容器或父元素设置了 overflow: hidden 或 transform，可能触发新的层叠上下文，导致边框渲染异常（少见但真实存在）

  排查建议：

  • 在开发者工具中查看 table 元素的 computed 样式，确认 border-collapse 确实是 collapse
  • 全局搜索 CSS 文件，删掉所有 border-spacing 声明
  • 检查是否无意中改了 table 的 display 值

  ---

  border-collapse: collapse 解决的是“怎么画线”，不是“画多宽”或“要不要换行”。小屏上表格横向溢出、内容挤压变形，跟它没关系——那是 width、min-width、overflow-x 或响应式重排的事。最容易被跳过的一步，就是忘了同时设 table { width: 100% } 或 min-width: fit-content，导致 collapse 后表格意外收缩。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！