必须置于或内部，因其不能作为子元素，否则被浏览器移出表格结构导致布局错乱；须为首个子节点，禁止换行或包裹；需设置vertical-align:top和min-height防高度塌陷；动态表格应委托toggle事件监听。

表格里直接塞 <details></details> 会破坏表格结构，导致渲染错乱或语义失效——必须把折叠容器放在单元格内部，且不能跨行跨列。

为什么<details></details>不能放在<tr>或<code><thead>里 <p>HTML 表格模型要求 <code><tr> 的直接子元素只能是 <code><td> 或 <code><th>；<code><details></details> 是块级元素，浏览器会自动将其“踢出”表格上下文，变成浮动在表格外的独立块，造成布局断裂、边框错位、响应式失效。

• 常见现象：折叠内容突然出现在表格顶部或底部，<td> 宽度塌陷，合并单元格（<code>colspan/rowspan）失效
• 验证方式：用浏览器开发者工具检查 DOM，若 <details></details> 不在 <td> 内部，就是结构错误 <li>正确位置只有两个：<code><td><details>...</details></td> 或 <th><details>...</details></th>

<summary></summary>必须是<details></details>的第一个子节点，表格里尤其容易踩坑

表格单元格常含换行、空格或包裹标签（比如 <p></p>），这些都会让 <summary></summary> 失去“首个子节点”身份，导致点击无反应——Safari 和旧版 Chrome 尤其敏感。

• ❌ 错误写法：<td><p><details><summary>标题</summary></details></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></td>（<summary></summary> 不是 <details></details> 的直接子节点）
• ❌ 错误写法：<td><details>\n <summary>标题</summary>\n</details></td>（换行符生成文本节点，<summary></summary> 变成第二个子节点）
• ✅ 正确写法：<td><details><summary>配置项</summary><div>参数说明…</div></details></td>（紧凑无空格、无包裹）

折叠内容高度塌陷？给<td>加<code>vertical-align: top和min-height

默认 <td> 垂直对齐是 <code>middle，展开后内容撑高，但相邻行单元格不会自动同步高度，视觉上像“断层”。同时，空 <td> 在折叠状态下可能高度为 0，导致边框消失。 <ul> <li>强制统一基线：<code>td { vertical-align: top; }

防高度归零：td details { min-height: 1.5em; }（保证折叠时也有基础高度）

避免内容溢出：td details[open] { overflow: visible; }（防止父 <td> 设了 <code>overflow: hidden）

监听toggle事件时，注意表格内<details></details>的动态生成问题

如果表格是 JS 动态渲染（如 Vue/React 渲染或 innerHTML 注入），toggle 事件监听器必须在元素插入 DOM 后绑定，且不能依赖 document.querySelectorAll('details') 一次性绑定——新行插入时监听器不会自动生效。

• 推荐做法：用事件委托，监听表格容器的 toggle 事件，再判断目标是否为 <details></details>
• 示例：table.addEventListener('toggle', e => { if (e.target.matches('details')) console.log(e.target.open); });
• 别监听 <summary></summary> 的 click：键盘操作（空格/回车）不会触发，且表格内焦点管理复杂

表格里用 <details></details> 最难的不是写法，而是守住结构边界——它只接受“单元格内部”的绝对服从，任何越界尝试都会立刻暴露为渲染异常。别试图让它跨行、别用 CSS 强行拉伸、也别指望它自动适配表头冻结逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！