外边框消失是因为外层table未设border-collapse: collapse，导致浏览器默认用separate模式，此时border仅作用于单元格而非表格容器；必须在外层table显式设置border-collapse: collapse并配合border属性，才能使外边框生效。

外边框消失是因为 border-collapse 没设对

嵌套表格里最常踩的坑是：外层 table 加了 border，但渲染出来只有内边框、没有外边框。这不是 bug，而是浏览器默认用 border-collapse: separate（分离模式），此时 border 只作用于每个单元格，外层表格自身不产生“容器级”边框。

真正起效的是给外层 table 显式设 border-collapse: collapse，再配合 border 属性——这时整个表格才被视为一个带边框的块级容器。

• border-collapse: collapse 必须加在外层 table 上，嵌套的内层 table 可以独立设置
• 别依赖 cellspacing="0"，它在 HTML5 中已废弃，且不控制外边框
• 如果用了 border-collapse: collapse 还没外框，检查是否被父容器的 overflow: hidden 或 padding 截断

嵌套表格的 border 优先级容易混乱

外层 table 的 border 和内层 table 的 border 会叠加，尤其当两者都设了 border-collapse: collapse 时，边框可能互相覆盖或抵消。

稳妥做法是：只让外层 table 控制整体边框样式，内层 table 设 border-collapse: separate 或干脆去掉 border，靠 padding 和背景色区分层级。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

立即学习“前端免费学习笔记（深入）”；

• 外层设 border: 2px solid #333 + border-collapse: collapse
• 内层设 border: none 或 border: 1px solid #eee + border-collapse: separate
• 避免内外都用 collapse + 同色粗边框，否则视觉上像“加粗了一次”，实际是两层边框重叠

移动端下外边框被裁切，其实是 box-sizing 没配对

在响应式布局中，嵌套表格常被包在 div 里，而这个 div 若设了 padding 或 max-width，又没配好 box-sizing，就会导致外边框被容器截掉一截。

关键不是改表格，而是确保包裹它的容器用 box-sizing: border-box，且 padding 不为负、overflow 不隐藏。

• 外层容器加 box-sizing: border-box
• 表格本身加 display: block（防止 inline 表现异常）
• 避免给容器设 width: 100% + padding 而不调整 box-sizing，否则边框会溢出

外边框问题往往不是表格写错了，而是它和周围盒模型、CSS 层叠规则打架。重点盯住 border-collapse、box-sizing 和包裹容器的 overflow 这三个点，比反复调 border 值更有效。