怎么用纯 HTML + CSS 实现树形表格的展开/折叠
不能。HTML 本身没有内置树形表格或展开逻辑，<table> 标签不支持嵌套层级、动态状态或事件绑定。所谓“HTML 做树形表格”，实际是用 HTML 结构承载数据，靠 JavaScript 控制显隐，CSS 辅助视觉样式。强行只写 HTML，只能静态展示层级（比如用缩进+符号），但点击展开/折叠一定需要 JS。
常见错误现象：onclick 写在 <tr> 上却没生效、子行突然错位、折叠后空行残留、键盘无法操作（无障碍失败）。
- 必须用
<tbody>或<div>包裹子行，不能直接把子<tr>插在父<tr>后面——浏览器会自动闭合<tr>，导致 DOM 结构错乱 - 推荐用
data-level或data-parent-id属性标记层级关系，比 class 名（如child-level-2）更易维护 - 用
aria-expanded和aria-hidden是可访问性底线，否则屏幕阅读器无法感知状态
用 JavaScript 控制 <tr> 显隐时的关键 DOM 操作
核心不是“显示/隐藏某一行”，而是准确识别并批量操作一组同属某父节点的子行。直接对 <tr> 用 style.display = 'none' 很容易破坏表格结构（colspan 错位、边框塌陷）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给每行加唯一
id（如row-123），父行通过data-children="123,456,789"关联子行 ID 列表，JS 解析后批量操作 - 避免用
visibility: hidden—— 它仍占布局空间，会导致折叠后留白；优先用display: none，但确保父<tr>的<td>内容里不包含需独立控制显隐的子表格 - 展开/折叠动作应绑定在父行的某个可点击区域（如带
role="button"的<span>），而不是整行<tr>—— 防止误触、支持键盘Enter/Space - 操作后调用
table.offsetHeight触发重排（可选），避免某些浏览器下滚动条未及时更新
用 <details> + <summary> 替代自定义 JS 的可行性
现代浏览器（Chrome 12+、Firefox 49+、Safari 15.4+）支持原生 <details>，但它和 <table> 天然不兼容：你不能把 <details> 直接塞进 <tr> 或 <tbody>，否则解析失败。可行折中方案是放弃 <table> 语义，改用 <div role="table"> 模拟：
<div role="table">
<div role="row">
<div role="cell"><details><summary>▶️ Category</summary><div role="rowgroup">...</div></details></div>
</div>
</div>
优点：零 JS、自带 ARIA、支持键盘；缺点：丧失 <table> 的语义化、打印样式不可控、colspan/rowspan 需手动模拟。仅适合简单层级、对 SEO 和表格功能要求不高的场景。
为什么用 transform: scaleY(0) 做折叠动画很危险
有人尝试用 CSS 过渡 transform: scaleY(0) 实现平滑收起，看似优雅，但问题明显：
-
<tr>是表格行盒，transform不触发重排，子元素（<td>）的宽度计算可能异常，尤其当内容含white-space: nowrap或长单词时 - 动画过程中若用户快速多次点击，
transform状态和 JS 维护的展开标识极易不同步，导致视觉与逻辑撕裂 - 旧版 Safari 对
<tr>的transform支持不稳定，可能出现闪烁或卡死
更稳妥的做法：用 max-height + overflow: hidden 过渡（需预估最大高度），或干脆放弃动画，用即时切换 —— 树形表格的核心是信息组织效率，不是动效。
真正容易被忽略的是父子行之间的数据一致性：展开状态没存到数据模型里，排序或搜索后状态丢失；或者服务端返回的 JSON 没带层级标识字段，前端硬凑 ID 关系导致错层。这些比“怎么让箭头旋转”重要得多。
