border-collapse: collapse 必须设在 table 元素上，写在 tr、td 或外层容器上无效；需保持 display: table，清除 border-spacing 和 cellspacing，并统一 th/td 的边框样式。
border-collapse: collapse 必须设在 table 元素上
这个声明只对 table 有效，写在 tr、td 或外层 div 上完全不起作用。它不是“继承”属性，也不支持选择器穿透。一旦写错位置，浏览器就当它不存在——你看到的“双线”或“白缝”，八成是这一步漏了。
同时要确认 table 的 display 值没被意外改掉：display: block 或 inline-block 会让 border-collapse 静默失效。保持默认的 display: table 才能生效。
常见干扰项必须清理：
-
border-spacing和collapse互斥，只要存在任何border-spacing（包括框架自动注入的），collapse就不工作 -
cellspacing属性（HTML 属性）也会覆盖 CSS 行为，建议彻底移除 -
table { border: none }会导致外框“消失”，哪怕内部边框都画出来了，也容易误判为样式没生效
th 和 td 的 border 值必须完全一致
边框合并不是简单叠加，而是按三重优先级“竞选”：宽度最大者胜出 → 样式更实者（solid > dashed > dotted）→ 同级时后声明者胜出。如果 th 设了 1px solid #333，而 td 是 1px dashed #666，交界处就会显示虚线，视觉上像“断开”。
正确做法是统一声明：
table { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 8px 12px; }
注意：border: 0 不参与竞选，会被相邻边框“穿透”，真要清掉某边，得用 border-top: 1px solid transparent 或明确设为 0（如 border-top: 0）。
rowspan/colspan 合并区域的边框“消失”不是 bug，是渲染逻辑
合并单元格时，被跨占的位置根本不会渲染 td 或 th——那里是空的，没有元素，自然也没有边框可画。所以你看到的“下方边框断开”“右侧边框缺失”，不是样式没生效，而是那个位置压根没东西。
补救方式只有手动强化交界处：
- 若
rowspan占据多行，且希望其右侧有清晰分隔，给它加border-right - 若
colspan占据多列，且下方需强调分隔，给它加border-bottom - 避免依赖“自动延伸”，尤其是和
:hover或background-color一起用时，人工补边框才能保证视觉连贯
响应式场景下更要小心：小屏中浏览器可能忽略 rowspan/colspan，导致人工补的边框错位。此时别硬调 CSS，应直接在 @media 中改用结构重排（比如拆成多个独立表）。
为什么还有“白缝”或“错位感”？先查 padding 和语义结构
看起来像边框间距的“白缝”，大概率是 padding 撑开的。统一设 th, td { padding: 0; } 再观察，才能判断是不是真实边框问题。
另一个高频盲区是 HTML 结构本身：比如某行少写了一个 td，或 rowspan="3" 后连续三行都在同一列写了 td，就会导致列数错乱，浏览器强行对齐后边框必然错位。验证方法很简单——把所有 colspan/rowspan 展开成逻辑单元格，检查每行总数是否一致。
真正难调的从来不是 CSS 规则，而是合并行为暴露出来的 HTML 结构缺陷。边框只是镜子，照出的是语义是否扎实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
