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"> <li>CSS中明确写：<code>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声明顺序靠后。


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载

典型现象：

• 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就形同虚设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！