border-collapse必须写在table上才生效，写在tr、td或div上无效；需清除border-spacing、避免display非table值，并注意边框竞争规则。
border-collapse必须写在table上才生效
加了border-collapse: collapse却没反应？90%是因为写错了位置。它只对table元素起作用，写在tr、td或外层div上完全无效，浏览器会静默忽略。
实操建议：
- 直接用内联样式：
<table style="border-collapse: collapse"> - CSS中明确写：
table { border-collapse: collapse; }，别写成td { border-collapse: collapse; } - 如果用了 Ant Design 或 Bootstrap，它们常把
table的border-collapse重置为separate，需检查 computed 样式；临时验证可用table { border-collapse: collapse !important; }，但长期应提高选择器权重（比如加类名.data-table）
为什么加了collapse还是双线/有白缝？
不是属性失效，而是配套没跟上。border-collapse: collapse和border-spacing互斥——只要存在border-spacing声明（哪怕值是0），collapse就自动退化为separate。
常见问题与对策：
立即学习“前端免费学习笔记（深入）”；
-
border-spacing残留：全局搜索删掉所有border-spacing相关规则，包括框架注入的 -
table设了display: block或inline-block：这会让border-collapse彻底失效；改用width、margin控制布局 - 视觉“缝隙”其实是
padding撑开的：清空td, th { padding: 0; }再观察，才是真实贴合效果 - 外框“消失”错觉：给
table加个透明边框border: 1px solid transparent，再统一th, td { border: 1px solid #ccc; }，才能看到干净内线
合并后边框粗细/颜色不对？这是边框竞争规则在起作用
border-collapse: collapse不是简单叠加或取平均，而是让相邻边框按三重优先级“竞选”胜出者：宽度最大 > 样式更实（solid > dashed） > CSS声明顺序靠后。
典型现象：
-
th { border-bottom: 2px solid red; }和td { border-top: 1px solid #666; }同时存在 → 横向线显示为2px solid red - 若两者宽度、样式一致，但
td规则写在后面 → 颜色可能被覆盖 - 想突出表头底边？用单边控制：
th:first-child { border-bottom: 2px solid #333; }，并确保选择器权重足够
响应式表格不能只靠border-collapse
border-collapse: collapse只管“怎么画线”，不管“画多宽”。它解决不了小屏横向溢出问题。
真要适配移动端，必须额外加：
-
table { display: block; overflow-x: auto; }包裹滚动容器 - 媒体查询里把
th, td改成display: block重排结构（需配合data-label补语义） - 别忘了
table { width: 100%; min-width: fit-content; }，否则collapse后表格可能意外收缩、内容挤压变形 - 盒模型要同步处理：
td, th { box-sizing: border-box; padding: 12px; }，否则padding会撑破列宽
最常被跳过的一步：没确认table的display值是否仍是table（而非block或inline-block），以及没清掉border-spacing——这两点一漏，collapse就形同虚设。
