用tr+display实现行展开：在目标tr后紧邻插入display:none的tr，点击切换为display:table-row；需同tbody、td用colspan合并、仅调td内padding；details/summary因块级特性会破坏表格结构，应弃用；动态内容需按data-id清理旧展开行再插入，移动端建议用透明绝对定位button扩大点击区域。
怎么用 tr 和 display 实现基础行展开
HTML 原生不支持“点击某行展开详情”，得靠 CSS + JS 配合。最轻量的做法是：在目标行后紧邻插入一个 tr，初始设为 display: none，点击时切为 display: table-row（不能用 block，否则会破坏表格结构）。
关键点：
-
tr必须和原行同属一个tbody，跨thead/tfoot会错位 - 展开行的
td要合并列数（用colspan），否则会按默认列宽挤出错乱单元格 - 不要对
tr设height或padding，这些在表格中行为不稳定；改用td的padding
为什么 details/summary 在表格里基本不能用
虽然语义上 details 很适合“展开/收起”，但它本质是块级元素，强行塞进 table 会触发浏览器自动包裹 div 或脱离表格流，导致布局崩溃、边框错位、甚至整个 tbody 渲染异常。
实测常见表现：
立即学习“前端免费学习笔记（深入）”；
- Chrome 下
details外层被自动加display: block，撑开整行高度 - Safari 中
summary内容无法水平居中对齐表头 - 展开后无法响应
tr:hover样式
结论：别试，直接放弃。
如何让展开行支持动态内容（比如异步加载详情）
静态内容可以直接写死 tr；但详情数据来自接口时，得等请求完成再插入 DOM。注意两个坑：
- 不要在
fetch().then()里直接insertAdjacentHTML到tbody—— 如果用户快速连续点击多行，回调执行顺序不可控，容易插错位置 - 推荐做法：给每行加唯一
data-id，点击时先清空已存在的同 ID 展开行（用document.querySelector('tr[data-parent-id="123"]')），再追加新tr - 加载中状态建议用单个
td内放<span>加载中...</span>，避免重绘整行
示例片段：
tr[data-parent-id="456"] > td { padding: 8px 12px; }
移动端点击区域太小？别只加 onclick
纯靠 tr onclick 在手机上经常点不中，尤其当行高较小时。真实问题不是 JS 绑定失败，而是触摸事件未穿透或触发面积不足。
- 给
tr加cursor: pointer和user-select: none提升可感知性 - 更可靠的方式：在每行第一列（
td）内加一个透明button，设position: absolute; inset: 0; opacity: 0;，既扩大热区又不影响视觉 - 避免在
tr上监听touchstart后立即preventDefault，这会阻断滚动
复杂点在于：展开状态要持久化到 UI（比如箭头图标翻转）、还要考虑键盘焦点（Enter 触发），这些细节容易被忽略，但直接影响可用性。
