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