嵌套多层table时边框异常的根本原因是border-collapse不继承且每层独立渲染；必须逐层显式设置border-collapse:collapse，否则外层与内层边框叠加导致加粗、错位或消失。
嵌套多层 <table> 时边框变粗、错位、消失或颜色异常，根本原因不是“样式没写对”，而是 <code>border-collapse 不继承，且每层表格默认独立渲染边框。必须逐层显式控制，不能靠父级样式“带过去”。
为什么嵌套表格的边框会突然加粗或错位
浏览器对每层 <table> 单独计算边框：外层 <code>td 的右边框 + 内层 table 的左边框，在同一位置叠加，视觉上就变成双线；如果外层用了 border-collapse: collapse 而内层没设，内层仍按 separate 渲染，就会出现局部单线、局部双线、甚至边框“吃掉”单元格内容的现象。
-
border-collapse是非继承属性，子表格不会自动沿用父表格的值 - 即使外层设置了
border-collapse: collapse，内层<table> 仍默认为 <code>separate -
cellspacing和border属性在现代 CSS 中已被弃用，混用易触发不可预测的层叠行为 - 外层
<table>：加 <code>style="border-collapse: collapse;" - 所有内层
<table>（包括第二层、第三层）：同样加 <code>style="border-collapse: collapse;" - 不要指望通过父级
td的 CSS 规则把border-collapse“透传”给子表格——它做不到 - 若用 CSS 类统一管理，确保该类明确作用于所有层级的
<table> 元素，而非只写 <code>table（会被子表格忽略）边框仍重叠？试试
border-style: hidden当需要保留外层边框但隐藏内层表格的边框干扰时，
border-style: hidden比border: none更可靠——它参与边框冲突计算，能主动“让位”，而不是简单移除。- 对内层
<table> 设置 <code>style="border-collapse: collapse; border-style: hidden;" - 或更精细地：只给内层
td设border-style: hidden，保留表头th边框 - 避免用
border-width: 0替代hidden，前者可能在某些浏览器中仍占布局空间 - 注意：如果内层表格本身需要显示边框，就别用
hidden，改用统一配色+细线宽（如1px）+显式border-collapse - 检查所有
@media规则是否包含内层<table> 选择器，例如 <code>@media print table table { border-collapse: collapse; } - 避免用
padding模拟边框来“绕开”问题，它和真实边框在缩放/打印时渲染优先级不同，极易冲突 - 暗色主题下，
border-color若未随主题动态更新，嵌套层可能因对比度不足而“隐形”
移动端和打印场景下的隐藏陷阱
在响应式或打印样式中，嵌套表格边框问题会放大：缩放导致像素对齐偏移、媒体查询未覆盖子表格、
@media print里漏掉内层border-collapse，都可能让原本正常的边框突然错位或消失。真正麻烦的从来不是第一层嵌套，而是第三层或第四层表格——它们往往被当成“内部实现细节”忽略样式控制。只要有一层漏掉
border-collapse或误用border-style，整个边框体系就可能崩掉。动手前先数清楚嵌套层数，再逐层确认，比事后调试快得多。 - 对内层
嵌套表格必须单独设置 border-collapse: collapse
这是最基础也最容易被跳过的一步。只要存在嵌套，每一层 <table> 都要显式声明 <code>border-collapse: collapse，否则边框合并规则不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
