嵌套表格边框变粗的根本原因是内外层表格在默认 border-collapse: separate 下边框物理重叠；必须分别设置外层 border-collapse: collapse 和内层 border-collapse: collapse + border: none，且统一单元格边框样式。
嵌套表格的边框重叠，根本不是样式没写对，而是两个独立的 <table> 渲染上下文在各自默认 <code>border-collapse: separate 下叠加造成的视觉加粗——必须分别控制外层和内层的边框行为，不能只靠一个 border-collapse: collapse。
为什么嵌套表格边框会突然变粗
浏览器把每个 <table> 当作独立渲染单元。外层表设了 <code>border-collapse: collapse，只影响它自己的单元格；内层表仍用默认 separate 模式，它的 <td> 边框就会和外层表的边框（比如 <code><td> 的 bottom border）物理重叠，尤其在高 DPI 屏或缩放时更明显。
<ul>
<li>常见错误现象：嵌套区域边框比其他地方粗一倍、颜色更深，或出现错位细缝</li>
<li>不要只给外层加 <code>border-collapse: collapse，内层也必须显式声明
cellspacing="0" 和 border="1" 这类 HTML 属性在现代 CSS 控制下已不可靠，优先用 CSS外层表格必须设 border-collapse: collapse 且统一单元格边框
这是基础前提，否则外层自身就存在双线问题，再处理内层也是徒劳。
- 必须直接作用于
<table> 元素，写在 <code><tr> 或容器上无效 <li> <code>th, td必须统一设置border: 1px solid #ccc，不能只设<table> 的 border <li>避免混用旧属性：<code>align、valign与 CSS 冲突时，边框渲染行为不可预测 - 给内层
<table> 加 <code>style="border-collapse: collapse; border: none;" - 或者更彻底：清除所有单元格边框
th, td { border: none; } - 如果内层表仍需分隔线（比如模拟卡片内网格），改用
background-color+padding模拟，避开 border 渲染路径 - 不要试图用
@media覆盖rowspan值（HTML 属性无法被 CSS 覆盖） - 小屏优先考虑用
display: grid或flex替代嵌套表结构 - 若必须保留嵌套，至少为内层表加
table-layout: auto，防止列宽计算异常拉扯边框
内层表格要禁用自身边框，只保留内容结构语义
内层表不承担“绘制边框”的职责，只负责组织数据。让它视觉上“消失”边框，才能避免和外层叠加。
响应式或复杂嵌套时，放弃原生 rowspan/colspan
当内层表在小屏下被压缩，或外层用了 table-layout: fixed，rowspan 可能被浏览器忽略，导致你手动补的边框错位、断开。
最容易被忽略的一点：嵌套表格的边框问题从来不是“怎么加”，而是“在哪加、加几次”。外层管结构，内层管内容，两者边框职责必须切割清楚——否则再多的 !important 也压不住渲染引擎的叠加逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
