border-collapse: collapse没生效最常见原因是未在元素上显式设置或被更高优先级规则覆盖；它使相邻单元格共享边框并取最大宽度，而separate模式下各单元格独立绘边框且受border-spacing影响。
为什么 border-collapse: collapse 没生效？
最常见原因是父级表格元素（<table>）没正确应用该属性，或被更具体的 CSS 规则覆盖。浏览器默认对 <code><table> 使用 <code>border-collapse: separate，所以必须显式声明且确保它生效。
- 检查是否只写了
border-collapse: collapse，但没加在<table> 元素上（写在 <code><td> 或 <code><tr> 上无效） <li>用浏览器开发者工具查看 computed styles，确认 <code>border-collapse确实是collapse，而不是被!important或高优先级选择器覆盖 - 注意：某些重置 CSS（如 normalize.css）或 UI 框架（如 Bootstrap）会强制设为
separate，需针对性覆盖 -
collapse下：相邻单元格共享一条边框线，border-width取最大值（比如td设1px，th设2px，最终显示为2px） -
separate下：每个单元格独立绘制边框，会出现双倍宽度叠加（例如两个1px边框紧挨着，视觉上像2px），且受border-spacing控制间隙 - 性能上：
collapse渲染开销略低，尤其在大型表格中更稳定 <th> 和 <code><td> 同时设置了 <code>border-bottom和border-top，且都在同一行/列交界处 → 实际渲染取较宽者，但容易误判为“加粗”- 父容器（如
<table>）本身有 <code>border，和内部单元格边框未对齐，形成视觉叠加 - 使用了
outline、box-shadow或伪元素模拟边框，它们不参与border-collapse计算，会额外叠加 - 给
<table> 设 <code>border-collapse: collapse+border: none - 只在
<th> 和 <code><td> 上设置单向边框，例如：<code>border-bottom: 1px solid #ccc（表头）+border-bottom: 1px solid #eee（数据行） - 如果需要外边框，单独给
<table> 加 <code>border: 1px solid #ddd，并确保内部单元格不重复画外侧边 - 避免混用
border和outline；禁用border-spacing（它在collapse模式下被忽略，但残留声明可能干扰调试）
border-collapse: collapse 和 border-collapse: separate 的实际差异
两者不只是“边框是否合并”，还直接影响边框渲染逻辑和尺寸计算：
设置了 collapse 还是看起来边框变粗？查这三处
这不是 bug，而是 CSS 边框叠加规则在起作用 —— 即使合并了，不同方向的边框仍可能叠加渲染：
真正干净的单像素表格边框写法
要彻底避免“变粗感”，关键不是只设 collapse，而是统一控制源头：
复杂点在于：边框粗细感知是相对的，人眼对连续横向线条特别敏感。哪怕所有 border-width 都是 1px，只要颜色、虚实或上下文对比度不同，就会觉得某处“更重”。真要严控，就得把 border-color、border-style、background-clip 全部纳入一致性检查 —— 这往往比改一个属性花的时间多得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
