HTML表格实现带有层级缩进的树状数据展示逻辑技巧-html教程-PHP中文网

表格子行缩进必须用td的padding-left配合data-level动态计算，禁用tr的margin或transform；动画只能过渡td内边距或max-height；每行td数量须与表头严格一致，空单元格需补。

html表格实现带有层级缩进的树状数据展示逻辑技巧

表格里怎么让子行缩进又不破坏结构

直接给 <tr> 加 <code>margin-left 或 transform: translateX() 是无效的——<tr> 是 table-row，不支持外边距塌陷以外的盒模型行为，且 <code>transform 会脱离表格布局流，导致列宽错位、屏幕阅读器无法识别层级。真正能用的只有两种缩进方式：

用 padding-left 作用于 <td>（推荐），配合 <code>data-level 属性动态控制：td { padding-left: calc(var(--level, 0) * 24px); }，再由 JS 设置 style="--level: 2"
若需兼容 IE11，改用 margin-left，但必须确保父 <tbody> 是 <code>display: block（此时已非标准表格语义，慎用）
千万别在 <td> 里套 div 再缩进——这会让 colspan 计算异常，打印或导出 Excel 时极易错列<h3>展开/折叠动画为什么卡顿或直接跳变</h3> <p><code>transition: height 0.2s 对 <tr> 完全无效，因为 <code>height 在 table-row 上是计算值，不触发重绘。可用方案只有两个，且各有约束：
- 过渡 padding-top 和 padding-bottom：轻量、兼容性好，但只适合内容高度变化不大、无 border/cellspacing 干扰的场景
- 用 max-height + overflow: hidden：必须预估子行最大高度（比如 5 行 × 40px = 200px），设 max-height: 0 → max-height: 200px；否则动画末尾会突兀“弹开”
- 所有过渡都必须加 will-change: padding 或 will-change: max-height，否则 Chrome 下仍可能掉帧
子行 <td> 数量不对导致表格错乱<p>树形表格最常被忽略的硬性规则：每行 <code><tr> 的 <code><td>（或 <code><th>）数量必须与表头严格一致。哪怕某列为空，也得补上空 <code><td>，否则浏览器会自动修正 DOM，引发列偏移、排序错位甚至 aria 属性失效。<ul><li>生成子行时，先读取 <code>thead tr th 的长度，再循环生成对应数量的 <td> <li>首列放图标和文本，其余列用 <code><td> </td> 占位（不能省略，也不能用 colspan 合并）
如果用了 aria-expanded 或 aria-level，必须同步写在 <tr> 上，不能只写在按钮或图标上<h3>服务端渲染（SSR）后 JS 展开状态不同步</h3> <p>服务端吐出的 HTML 若默认展开部分节点，而客户端 JS 初始化时又从初始数据重新判断展开状态，就会闪动或状态错乱。关键不是“要不要 hydrate”，而是 key 必须一致：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2570" title="Baoyu Markdown To Html"><img src="https://img.php.cn/upload/skill/000/000/081/178918939167217.jpg" alt="Baoyu Markdown To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill2570" title="Baoyu Markdown To Html" class="overflowclass">Baoyu Markdown To Html</a> <p class="overflowclass">将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...</p> </div> <a rel="nofollow" href="/xiazai/skill2570" title="Baoyu Markdown To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>每个节点用稳定 ID（如数据库主键）作为 <code>key，避免用数组索引
服务端和客户端渲染时，对同一节点调用相同的展开判定逻辑（比如都查 isExpandedMap[nodeId]）
首次 render 后立即比对 DOM 中的 aria-expanded 值，不一致则手动 patch，而不是等用户点击才修正