必须给table元素设border-collapse: collapse，其他地方写都白搭；因该属性仅对table生效，写在td、tr或div上会被浏览器忽略，且需配合显式border声明和box-sizing: border-box才能确保padding可见与边框正确合并。
必须给 table 元素设 border-collapse: collapse，其他地方写都白搭。
为什么写了 border-collapse: collapse 却没效果？
最常见原因是写错了位置——这个属性只对 table 生效，写在 td、tr 或外层 div 上，浏览器直接忽略。
- 错误写法：
<td style="border-collapse: collapse"> 或 <code>tr { border-collapse: collapse; } - 正确写法只有两种：
table { border-collapse: collapse; }（推荐），或行内样式<table style="border-collapse: collapse"> <li>UI 框架（如 Bootstrap、Ant Design）常默认把 <code>table的border-collapse设为separate，需检查开发者工具中computed样式是否被覆盖 - 如果用了
display: block或display: inline-block改变table的显示模式，border-collapse会彻底失效 - 比如
th { border-bottom: 2px solid #333; }和td { border-top: 1px solid #666; }相邻，最终显示的是2px solid #333 - 若两者宽度、样式相同，后写的 CSS 规则颜色会生效（注意源码顺序和选择器权重）
-
border: none不参与竞选，会被另一侧边框“穿透”显示，慎用 - 想统一视觉，建议所有
th和td都用相同border值：th, td { border: 1px solid #ccc; } - 排查时先全局搜索并删掉所有
border-spacing声明，包括框架注入的重置样式 - 别试图组合：
border-collapse: collapse; border-spacing: 0;—— 后一句纯属冗余 - 要控制单元格间距？改用
padding；要隐藏外边框？用table { border: none; }或transparent
border-collapse: collapse 后边框粗细/颜色不一致怎么办？
它不是“混合”，而是让相邻边框按规则“竞选”出一条胜者：宽度 > 样式 > 声明顺序。
border-spacing 和 border-collapse 能一起用吗？
不能。只要 border-collapse: collapse 生效，border-spacing 就完全失效，无论你写 0 还是 10px 都没区别。
真正容易被忽略的点是：border-collapse 是个“开关”，但它只管“怎么合并”，不管“有没有边框”。没给 table 或 th/td 显式设 border，就看不到线——哪怕合并了，也是空的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
