嵌套表格出现视觉缝隙的根本原因是浏览器默认的border-spacing和table自身padding干扰，以及border-collapse继承导致边框错位；解决需隔离样式：父td设padding:0、无边框，子表显式设border-collapse:separate和border-spacing:0，并用aria-label或aria-owns保障无障碍语义。
为什么嵌套表格总出现视觉缝隙
浏览器对 <table> 的渲染有两层默认干扰：一是 border-spacing（单元格间距，默认 2px），二是 <table> 元素自身的 padding（哪怕没写，某些 UA 样式会带）。这两者会让子表的上边框和父表 <td> 的内边距之间产生不可见但可测的空隙，看起来就是“没接上”。
更隐蔽的问题是：父表若设了 border-collapse: collapse，它会试图“吞掉”子表的边框——子表的 border-top 可能被合并消失，或与父表 <td> 的 border-bottom 错位叠加，反而加粗或断开。
- 不要在
<table>上写padding，所有留白必须交给<td>或<th> - 子表必须显式设置
border-collapse: separate，否则继承父表 collapse 行为会导致边框错乱 - 父表
<td>的padding值要和子表的margin配合，例如父td { padding: 0 }+ 子表margin: 0才可能真正“顶死”
如何让子表格边框和父单元格严丝合缝
关键不是“怎么嵌”，而是“怎么隔离样式”。子表不能依赖父表的任何边框逻辑，必须独立控制起始位置。
- 父
<td>设置padding: 0，并移除所有 border 相关声明（包括border: none） - 子
<table>显式写border-collapse: separate; border-spacing: 0 - 子表第一行
<tr>的<td>或<th>加border-top: 1px solid #ccc，而不是靠父<td>的border-bottom去“对接” - 如果父
<td>本身有背景色或圆角，子表需用overflow: hidden包裹，或用margin: -1px微调（仅限像素级校准）
用 colspan 搭配空行比硬塞子表更可控
真正在生产环境里“无缝”的做法，往往根本不用嵌套 <table>。比如展开详情、分组数据这类场景，直接操作 DOM 结构比拼样式更可靠。
立即学习“前端免费学习笔记（深入）”；
- 在目标行下方插入一个
<tr class="detail-row">，该行只有一个<td colspan="N"> - 这个
<td>内放一个独立<table>，但重置全部样式：border: none; margin: 4px 0; width: 100% - 用 JS 控制
.detail-row的display，避免子表始终参与布局计算 - 这样既规避了
<tr>下直接放<table>被浏览器“踢出结构”的风险，又能让 CSS 和 JS 精准命中目标区域
无障碍和语义上怎么补救
即使视觉上接上了，<table> 嵌套本身不传达“父子关系”。屏幕阅读器不会说“这是用户信息表下的订单子表”，它只会把两个表当成独立表格朗读。
- 给子表加
aria-label="用户订单明细"，别依赖视觉标题 - 如果子表是主表某行的扩展内容，用
aria-owns关联主行 ID 和子表 ID（例如<tr id="user-123">...</tr>+<table aria-owns="user-123">） - 避免用
role="presentation"抹掉语义——那等于告诉辅助技术“这堆 HTML 不重要”，反而更难理解上下文
最麻烦的点不在代码怎么写，而在于你得同时满足三件事：浏览器渲染不出错、CSS 边框对得齐、屏幕阅读器读得懂。其中任意一个被忽略，所谓的“无缝”就只是视觉幻觉。
