HTML表格实现可展开树形行需用data-level和data-parent-id标记父子关系，子行初始hidden，点击父行时动态querySelectorAll匹配data-parent-id并切换显隐；CSS缩进用padding-left配合CSS变量，禁用transform缩进；tr不支持height过渡，改用td内边距或max-height动画。
HTML表格里怎么实现可展开的树形行
纯 HTML 不支持原生树形表格，必须靠 JavaScript 控制 DOM 显示/隐藏，配合 CSS 做视觉折叠效果。核心思路是：用 <tr> 模拟层级关系，通过添加/移除 <code>hidden 属性或 CSS 类来控制子行显隐，再用小箭头图标提示状态。
如何用 data-level 和 data-parent-id 标记父子关系
避免用 class 名硬编码层级（比如 class="level-2"），改用语义化 data 属性更易维护和扩展：
-
data-level="0"表示根节点（顶级行） -
data-parent-id="row-102"表示该行属于 ID 为row-102的父行 - 所有子行初始加
hidden属性，点击父行时 JS 批量查找并切换对应data-parent-id的行 - 注意：
id值需唯一且不能含空格或特殊字符，推荐用row-{number}格式
点击展开时常见的 DOM 查找错误
最容易踩的坑是用 document.querySelectorAll('tr[data-parent-id="row-102"]') 后直接操作，却没考虑后续动态插入的新行——这些新行不会被自动纳入查询结果。正确做法是：
- 每次展开前重新执行
querySelectorAll，不缓存结果集（DOM 是活的） - 避免用
nextElementSibling遍历下一行判断是否为子行（表格结构复杂时极易错位） - 子行必须紧邻父行插入？不必须。但若跨多级或中间穿插其他类型行（如合计行），
data-parent-id是唯一可靠依据 - 如果用了 Vue/React，别在模板里写
v-if="expanded"控制整行渲染——这会破坏表格语义结构，导致表头对齐、aria 属性失效等问题
CSS 折叠动画和缩进怎么写才不卡顿
直接对 <tr> 使用 <code>transition: height 0.2s 无效（<tr> 是 table-row，height 不触发过渡）。替代方案只有两种：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>给子行内的 <code><td> 设置 <code>padding-top/padding-bottom 并过渡它（轻量、兼容性好）
max-height + overflow: hidden 控制（需预估最大高度，否则动画突兀）padding-left 配合 data-level 计算：td { padding-left: calc(var(--level, 0) * 24px); }，再用 JS 设置 style="--level: 2"
transform: translateX() 缩进——会影响表格单元格对齐和屏幕阅读器识别树形表格最难的不是展开逻辑，而是保证每行仍属于合法的 <table> 结构：不能漏掉 <code><tbody>，子行的 <code><td> 数量必须和表头一致，aria-level/aria-expanded 这些可访问性属性容易被忽略但影响很大。</td>
