答案：border-collapse: collapse必须作用于table元素才生效，写在td、tr或div上无效；其边框合并按宽度、样式、声明顺序三重优先级竞争胜出；失效常见原因包括border-spacing冲突、table display非表格值、外框未设border。
为什么只给table加border看不到内边框
因为table的border只控制外框，单元格（td、th）默认没有边框，自然不显示内线。浏览器默认用“分离边框模型”，即使你给td设了border，也可能和table边框重叠或错位，形成双线或粗边效果。
- 必须同时给
table、th、td都设置border才能看到完整内边框 -
border-collapse: collapse必须作用于table元素，否则相邻单元格边框不会合并 - 漏掉
th会导致表头无边框，视觉断裂
border-collapse: collapse和separate的区别在哪
这是控制内边框是否“连成一线”的核心开关。不设或设为separate时，每个td和th的边框独立渲染，左右/上下边框会并排出现，看起来像2px宽；设为collapse后，共享边线，真正实现“细线表格”效果。
-
collapse：推荐用于常规数据表格，消除冗余线条，节省视觉重量 -
separate：仅在需要单元格间距（如border-spacing: 4px）或圆角边框时使用 -
border-spacing在collapse模式下完全失效，写了也无效
如何让内边框变成虚线或只保留底部边框
直接操作border的子属性即可，不需要额外标签或JS。重点是选择器要精准，避免影响外框或干扰border-collapse逻辑。
- 虚线内边框：
th, td { border: 1px dashed #999; } - 仅下边框：
th, td { border: none; border-bottom: 1px solid #ddd; } - 首行表头加顶边框：
th:first-child { border-top: 2px solid #007acc; } - 最后一行数据加底边框：
tr:last-child td { border-bottom: 2px solid #007acc; }
圆角表格的内边框怎么不溢出
border-radius只对table生效，但单元格边框会撑出圆角区域——除非强制裁剪。这不是bug，而是盒模型行为。
- 必须加
overflow: hidden到table上，否则border-radius形同虚设 -
border-collapse: separate才能让border-radius在table上正常渲染；collapse模式下圆角会被边框合并逻辑破坏 - 若坚持用
collapse又想要圆角，只能放弃table圆角，改用border-radius作用于th:first-child、td:first-child等单个单元格
border-collapse的继承性和作用域——它只影响当前table及其内部单元格，不能跨表生效；另外，CSS优先级冲突（比如框架样式覆盖你的td边框）比语法错误更难排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
