嵌套表格必须写在<td>或<th>内，否则浏览器会自动移出<tr>导致DOM错乱；子表需重置border-collapse: separate，避免继承父表边框坍塌；推荐用<details>替代静态嵌套以提升可访问性与维护性。
嵌套表格必须写在 <td> 或 <th> 里
浏览器对 <tr> 的子元素有硬性限制：它只接受 <td> 和 <th>。如果你把 <table> 直接写在 <tr> 下，浏览器会自动把它“踢”出去——可能塞到父 <table> 外面，也可能丢进隐式 <tbody>，结果就是 DOM 结构错乱、CSS 选不到、JS 查不到节点。
常见错误现象包括：
- 子表格显示在主表上方或下方，而不是目标单元格内
-
document.querySelector('table.nested')返回null - 给
tr > table写的 CSS 完全不生效
正确做法只有一个：把整个子 <table> 完整写进某个 <td> 或 <th> 的内容区域。必要时先用 colspan 或 rowspan 合并出足够空间，再往里塞。
子表边框消失？必须重置 border-collapse
父表若用了 border-collapse: collapse（常见于 Bootstrap 或自定义样式），子表默认继承后，边框会被“吃掉”——要么全无，要么粗细加倍。这不是 bug，是 CSS 层叠行为。
立即学习“前端免费学习笔记（深入）”；
必须显式重置子表样式：
- 给子表加
border-collapse: separate（不是inherit） - 避免用
width: 100%，改用max-width: 100%+overflow-x: auto，尤其当父表启用了table-layout: fixed时 - 子表内的
<th>默认加粗居中，容易和父表冲突，建议统一加类名隔离，比如.child-table th
用 <details> 替代静态嵌套更可控
多数所谓“嵌套需求”，其实是“点击展开详情”。硬塞一个子表进去，既难调样式，又难维护，还影响打印和屏幕阅读器体验。
<details> 是零 JS 解决方案，语义清晰、无障碍友好：
- 可被读屏软件识别，支持键盘聚焦与空格切换
- 子表样式完全独立，不受父表任何规则污染
- 不需要额外 JS 就能控制显隐，CSS 控制也干净
示例结构中，<details> 必须包裹在 <td> 内，且 <summary> 是唯一合法子元素；否则会破坏语义和可访问性。
复杂结构优先用 <thead>、<tbody>、<tfoot> 划分
没有显式声明 <thead> 和 <tbody> 时，浏览器会把第一个 <tr> 自动归入 <thead>，其余归入隐式 <tbody>。这会导致 JS 操作错位、CSS 选择器失效、打印样式异常。
真实项目中应明确划分：
-
<thead>放列标题，配合scope="col"提升可访问性 -
<tbody>放数据行，便于 JS 动态增删 -
<tfoot>放汇总行，部分浏览器支持在打印时重复出现在每页底部
注意：<caption> 必须紧贴 <table> 开始标签之后，否则会被忽略；summary 属性已废弃，不应再用。
