border-collapse: collapse必须写在table元素上才生效，写在td、tr或div上会被浏览器静默忽略；启用后需配合box-sizing: border-box确保padding可见，否则盒模型计算错乱导致列宽崩坏、内容换行。
必须写在 table 元素上，否则完全无效——这是 90% “加了没反应”的根本原因。
为什么 border-collapse: collapse 写在 td 或 tr 上不起作用
该属性是表格级布局控制，只对 table 元素本身生效。浏览器会静默忽略写在 td、tr 或外层 div 上的声明。你看到的“双线”“缝隙”，本质是默认 border-collapse: separate 下，相邻单元格各自画边框 + 默认 border-spacing: 2px 的结果。
实操建议：
- 直接用内联样式：
<table style="border-collapse: collapse"> - 或 CSS 中明确写：
table { border-collapse: collapse; }，别写成tr { border-collapse: collapse; } - 若用了 Ant Design、Bootstrap 等框架，检查 computed 样式是否被重置为
separate；临时验证可用table { border-collapse: collapse !important; }，但长期应提高选择器权重（如加类名.my-table）
border-collapse: collapse 后边框粗细/颜色不对？其实是“边框竞争”规则在起作用
它不是取平均、也不是叠加变细，而是让相邻边框按三重优先级“竞选”出一条胜出边框：
立即学习“前端免费学习笔记（深入）”；
- 宽度最大者胜出（
2px > 1px） - 样式更实者胜出（
solid > dashed > dotted） - 声明顺序靠后者胜出（CSS 文件中后写的规则、更高权重的选择器）
例如：th { border-bottom: 2px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，横向线显示为 2px solid #333；但如果 td 规则写在后面且宽度相同、样式相同，它的颜色就可能覆盖 th 的。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
想确保统一效果，推荐：
- 统一设
th, td { border: 1px solid #ccc; } - 要突出某行/列，用单边属性：
tr:first-child td, tr:first-child th { border-top: 2px solid #333; }，并确保选择器权重足够
加了 collapse 还有白缝或双线？先查这三件事
常见失效不是属性写错，而是配套缺失或冲突：
-
border-spacing与collapse互斥——只要用了前者，后者自动降级为separate；必须删掉所有border-spacing相关声明（包括框架注入的） - 给
table设置了display: block、inline-block等非表格display值，border-collapse就会失效；改用width、margin控制布局 -
table自身没设border（哪怕border: 1px solid transparent），会导致外框“消失”，只看到内部双线错觉；同时th和td的border值不统一（比如一个1px，一个2px），交界处必然加粗
真正“只有内线、无外框”的做法是：table { border: none; } 或 table { border: 1px solid transparent; } 隐藏外框，再靠 th, td { border: 1px solid #ccc; } 撑出清晰内线——此时相邻边框自动合并为单线。
为什么 padding 看不见？box-sizing 必须同步就位
border-collapse: collapse 启用后，td 和 th 的边框不再独立占位，但盒模型仍受 box-sizing 控制。默认 box-sizing: content-box 下，你设 width: 100px + padding: 12px + border: 1px，内容区只剩 74px 宽，文本会被压缩或换行。
稳的做法：
-
td, th { box-sizing: border-box; padding: 12px; }——让width包含内边距和边框 - 避免只给
table设box-sizing，它不影响子元素；td才是承载padding的主体 - 即使项目已用
* { box-sizing: border-box; }，仍建议显式加到td, th，因部分老版 reset 会重置该规则
边框合并后，border-width 不是相加而是“竞选”，盒模型尺寸计算逻辑随之改变——列宽崩坏、响应式错位，往往就卡在这一步没配齐。
