<details>必须置于<td>或<th>内部，因其不能作为<tr>子元素，否则被浏览器移出表格结构导致布局错乱；<summary>须为<details>首个子节点，禁止换行或包裹；需设置vertical-align:top和min-height防高度塌陷；动态表格应委托toggle事件监听。
表格里直接塞 <details> 会破坏表格结构，导致渲染错乱或语义失效——必须把折叠容器放在单元格内部，且不能跨行跨列。
为什么<details>不能放在<tr>或<thead>里
HTML 表格模型要求 <tr> 的直接子元素只能是 <td> 或 <th>；<details> 是块级元素，浏览器会自动将其“踢出”表格上下文，变成浮动在表格外的独立块，造成布局断裂、边框错位、响应式失效。
- 常见现象：折叠内容突然出现在表格顶部或底部，
<td>宽度塌陷，合并单元格（colspan/rowspan）失效 - 验证方式：用浏览器开发者工具检查 DOM，若
<details>不在<td>内部，就是结构错误 - 正确位置只有两个：
<td><details>...</details></td>或<th><details>...</details></th>
<summary>必须是<details>的第一个子节点，表格里尤其容易踩坑
表格单元格常含换行、空格或包裹标签（比如 <p>），这些都会让 <summary> 失去“首个子节点”身份，导致点击无反应——Safari 和旧版 Chrome 尤其敏感。
- ❌ 错误写法：
<td><p><details><summary>标题</summary></details></p></td>（<summary>不是<details>的直接子节点） - ❌ 错误写法：
<td><details>\n <summary>标题</summary>\n</details></td>（换行符生成文本节点，<summary>变成第二个子节点） - ✅ 正确写法：
<td><details><summary>配置项</summary><div>参数说明…</div></details></td>（紧凑无空格、无包裹）
折叠内容高度塌陷？给<td>加vertical-align: top和min-height
默认 <td> 垂直对齐是 middle，展开后内容撑高，但相邻行单元格不会自动同步高度，视觉上像“断层”。同时，空 <td> 在折叠状态下可能高度为 0，导致边框消失。
立即学习“前端免费学习笔记（深入）”；
- 强制统一基线：
td { vertical-align: top; } - 防高度归零：
td details { min-height: 1.5em; }（保证折叠时也有基础高度） - 避免内容溢出：
td details[open] { overflow: visible; }（防止父<td>设了overflow: hidden）
监听toggle事件时，注意表格内<details>的动态生成问题
如果表格是 JS 动态渲染（如 Vue/React 渲染或 innerHTML 注入），toggle 事件监听器必须在元素插入 DOM 后绑定，且不能依赖 document.querySelectorAll('details') 一次性绑定——新行插入时监听器不会自动生效。
- 推荐做法：用事件委托，监听表格容器的
toggle事件，再判断目标是否为<details> - 示例：
table.addEventListener('toggle', e => { if (e.target.matches('details')) console.log(e.target.open); }); - 别监听
<summary>的click：键盘操作（空格/回车）不会触发，且表格内焦点管理复杂
表格里用 <details> 最难的不是写法，而是守住结构边界——它只接受“单元格内部”的绝对服从，任何越界尝试都会立刻暴露为渲染异常。别试图让它跨行、别用 CSS 强行拉伸、也别指望它自动适配表头冻结逻辑。
