details标签不能直接嵌套在table的tr或td中，因html规范限定table子元素仅允许caption、colgroup、thead、tbody、tfoot、tr；浏览器会自动修复dom导致渲染错乱或交互失效。
details 标签不能直接作为 table 的子元素（如 tr、td）合法嵌套，强行写会导致 HTML 结构无效、渲染错乱或点击失效——这是浏览器解析规则决定的，不是样式或 JS 能修的。
为什么 details 不能直接塞进 table 里？
HTML 规范明确限定 table 的直接子元素只能是 caption、colgroup、thead、tbody、tfoot、tr；而 details 不在允许列表中。若你写成这样：
标题内容 |
浏览器会自动“修复” DOM：把 details 提到 table 外面，或包裹进匿名 div，导致点击区域脱离预期、toggle 事件丢失、甚至整行错位。
正确做法：用 div 模拟表格单元格语义
想在“看起来像表格”的布局中用 details，必须放弃原生 table 的 DOM 结构，改用 CSS Grid 或 Flex 模拟表格式对齐，同时保留 details 的合法嵌套位置：
-
details放在合法容器内（如div、section），再用display: grid设置列宽和对齐 - 每行用一个
div包裹多个“单元格”，每个单元格内放details或普通文本 - 避免用
float或inline-block布局，否则summary点击区易被截断
示例结构：
<div class="grid-table">
<div class="grid-row">
<div class="grid-cell">姓名</div>
<div class="grid-cell">部门</div>
<div class="grid-cell"><details><summary>操作记录</summary><p>2026-07-01 创建<br>2026-07-05 修改</p></details></div>
</div>
</div>
CSS 关键部分：
.grid-table { display: grid; grid-template-columns: 1fr 1fr 2fr; }
.grid-row { display: contents; } /* 让子 div 行为像 tr，不破坏 grid */
.grid-cell { padding: 8px; border: 1px solid #ddd; }
如果必须用原生 table，只能降级为 JS 控制
当项目强依赖 table 语义（如屏幕阅读器需读作表格）、且无法改结构时，details 就得弃用，改用 JS + max-height 过渡模拟折叠：
- 在
td内放一个div class="foldable"，初始style="max-height: 0; overflow: hidden;" - 给对应
summary元素（如button）绑定 click，读取目标div的scrollHeight并设为max-height - 切勿用
display: none/block，否则动画失效且破坏可访问性 - 手动同步
aria-expanded和aria-controls属性，补全无障碍支持
容易被忽略的细节
即使用了 Grid 模拟表格，summary 仍可能因父容器 overflow: hidden 或 transform 导致点击区域失效；Safari 对 details 在 flex/grid 子项里的 focus 状态支持不稳定，建议始终加 tabindex="0" 到 summary 上。真正麻烦的从来不是“怎么让它动”，而是“怎么让它在所有地方都可靠地动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
