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