用<table>做树形结构本质是视觉模拟，需靠data-level/data-parent-id标记层级、padding-left缩进、图标提示及JS控制显隐，不可嵌套表格或滥用rowspan，须兼顾可访问性与导出兼容性。
用 <table> 做树形结构，本质是靠缩进和视觉分组
纯 HTML 表格本身不支持嵌套行或折叠节点，所谓“树形”只是通过 colspan、padding-left、图标符号（如 ▶ / ▼）和 CSS 类控制视觉层级。浏览器不会识别父子关系，所有逻辑（展开/收起、数据加载）必须由 JS 驱动 DOM 操作。
常见错误是直接在 <tr> 里嵌套 <table> —— 这会破坏表格语义、导致可访问性失效，且多数屏幕阅读器无法正确解析嵌套表的行列关系。
- 推荐做法：所有数据平铺为
<tr>，用data-level="0"、data-parent-id等自定义属性标记层级和归属 - 缩进统一用
padding-left（例如每级 24px），避免用空格或 - 图标用
<span class="tree-toggle">▶</span>而非图片，减少请求，也方便用 CSS 控制旋转状态
rowspan 和 colspan 在树形表中慎用
有人试图用 rowspan 让父节点跨多行显示，再让子节点从同一列开始——这在视觉上可能“像树”，但实际会严重干扰排序、筛选和导出逻辑。Excel 导入/导出工具（如 SheetJS）遇到跨行单元格时，常将子行识别为新记录，导致数据错位。
更现实的约束是：一旦用了 rowspan，JS 动态插入/删除子行就必须同步修正所有相关 rowspan 值，极易出错。
立即学习“前端免费学习笔记（深入）”；
- 仅当树深度固定（如最多两级）、且完全不需要交互时，才考虑用
colspan合并父行的非关键列（如操作列） - 绝对不要用
rowspan跨越子节点行——它和动态树形结构天然冲突 - 替代方案：用
border-top: none和透明边框模拟“合并感”，比真实rowspan更可控
用 CSS 实现可折叠的视觉反馈
折叠状态不能只靠 JS 切换 display: none，否则屏幕阅读器会跳过隐藏内容，且键盘 Tab 顺序断裂。正确方式是结合 aria-expanded、aria-hidden 和 visibility: hidden + height: 0 的过渡动画。
tr.tree-child[data-expanded="false"] {
visibility: hidden;
height: 0;
border: 0;
}
tr.tree-child[data-expanded="true"] {
visibility: visible;
height: auto;
}
- 切换时只改
data-expanded属性和tr的visibility，不碰display - 父行的
<td>内必须有role="button"和aria-controls="child-row-123"，指向对应子行 ID - 避免用
transform: scaleY(0)做折叠——部分旧版 Safari 渲染异常，且影响焦点管理
导出 Excel 或打印时树形结构会丢失
所有基于 CSS 缩进和 JS 控制的展开/折叠，在导出为 CSV 或 Excel 时都会消失。用户看到的是一张扁平表，没有层级标识。如果业务需要保留结构，必须在后端生成导出数据时显式添加前缀（如 "├─ 一级部门"、"│ ├─ 二级团队"）或增加“层级”列。
前端导出库（如 SheetJS）默认只读取 <table> 的原始 DOM 结构，不会执行 JS，也不会读取 padding-left 值。
- 若需导出带缩进的 Excel，导出前用 JS 遍历
tr，根据data-level插入对应数量的\t到第一列文本中 - 打印样式表（
@media print）里要重置所有padding-left为 0，并用content: "● "伪元素加前缀，确保层级可见 - 别依赖浏览器原生“打印表格”功能——它几乎从不保留 JS 状态或 CSS 缩进
