必须设置 table 的 border-collapse: collapse 才能使相邻边框真正合并成一条线，否则默认 separate 模式下边框分离且有空隙；该属性仅作用于 table 元素，设为 collapse 后 border-spacing 失效。
table 设置 border-collapse 为 collapse 才真正重叠
默认情况下，HTML 表格的边框是分离的（border-collapse: separate），单元格之间有空隙，看起来像“双线”。要让相邻边框真正合并成一条线，必须显式设置 border-collapse: collapse。这个 CSS 属性作用于 <table> 元素本身，不是 <td> 或 <th>。
常见错误是只加了 border 却没设 border-collapse，结果边框又粗又难看，还出现重复线条。
-
<table style="border-collapse: collapse;">是最简生效写法 - 如果用外部样式表，写
table { border-collapse: collapse; } - 注意：一旦设为
collapse，border-spacing就失效了（会被忽略） - IE8+ 和所有现代浏览器都支持，无需前缀
为什么 border 值会影响重叠后的视觉效果
边框重叠后，实际显示的边框宽度和样式由“优先级规则”决定：浏览器会取相邻边框中宽度最大、样式最实（比如 solid 优先于 dashed）、颜色最深的那个来渲染。不是简单相加，也不是随机选。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 给
<table>设border: 2px solid #333，再给<td>设border: 1px solid #999，最终单元格内线仍是 2px 深色——因为 table 的 border 优先级更高 - 想让单元格内部有细线、外框粗一点？得把
border放在<td>上，并确保<table>的 border 不覆盖它（比如设border: none） - 避免混用不同样式（如一个
solid、一个dotted），否则可能降级为较弱样式或渲染不一致
用 border-spacing 配合 collapse 无效？那是你没关对地方
border-spacing 只在 border-collapse: separate 下生效；一旦设成 collapse，它就完全被忽略。很多人调了半天 border-spacing: 0 发现没用，其实是误以为它是“控制重叠间距”的开关。
立即学习“前端免费学习笔记（深入）”；
- 确认是否真用了
collapse：getComputedStyle(table).borderCollapse === "collapse" - 如果需要“看似重叠但留一丝缝隙”，只能退回到
separate+border-spacing: 1px，再用背景色模拟合并效果 - 移动端要注意：某些旧版 Safari 对
border-collapse的继承行为异常，建议直接写在<table>标签上，别依赖父容器样式
表格嵌套时，子表的 border-collapse 不会继承父表设置
每个 <table> 都是独立的渲染上下文。父表设了 collapse，子表仍默认 separate，容易造成嵌套区域边框突然变厚或错位。
- 子表必须单独声明：
<table class="inner">+.inner { border-collapse: collapse; } - 如果子表用于布局（比如老式邮件模板），且需保持
separate，记得重置其border-spacing，否则可能撑开父容器 - 用
outline替代border调试嵌套结构更安全——它不参与盒模型计算，也不受collapse影响
border-collapse: collapse 必须落在 <table> 上，二是所有参与重叠的边框定义（border）得在 DOM 层级和 CSS 优先级上说得清谁压谁。漏掉任意一个，就变成“看起来像重叠，其实还是两根线”。 
