用 details + summary 可实现无 JS 表格行详情展开，需将详情置于 colspan 单元格内；兼容性不足时用 dataset + toggleAttribute 配合 CSS 控制；内容过长用绝对定位浮层，移动端需处理 touch-action 和点击区域。
点击行触发详情展开，用 details + summary 最轻量
不用 JS 也能实现表格行详情展开，现代浏览器原生支持 details 元素。它语义清晰、可访问性好、默认折叠，且无需监听 click 或管理展开状态。
关键点：把整行 <tr> 包进 <details> 不合法（details 只能是块级容器），正确做法是让每行末尾单元格（<td colspan="N">）承载详情面板：
<table>
<tr>
<td>张三</td>
<td>28</td>
<td><details><summary>查看详情</summary><p>邮箱：zhang@ex.com；入职：2022-03</p></details></td>
</tr>
</table>
-
summary内容会显示为可点击的折叠标题，样式可自定义，但不要删掉它（否则失去可访问性和默认交互） - 如果表格有固定列宽或
table-layout: fixed，colspan单元格需确保宽度撑满，否则详情内容可能被截断 - Safari 旧版本（≤15.4）对
details在table内的渲染有 bug，若需兼容，跳到下个方案
需要 JS 控制展开逻辑？用 dataset 标记 + toggleAttribute
当详情内容动态加载、需与后端交互，或要支持「单次只展开一个」时，JS 是必要选择。核心是避免直接操作 style.display，改用属性控制更利于 CSS 响应：
<tr data-row-id="101"> <td>李四</td> <td>32</td> <td><button type="button" data-toggle="detail" data-target="101">▼</button></td> </tr> <tr class="detail-row" data-for="101"> <td colspan="3"><div class="detail-content">...</div></td> </tr>
- 点击按钮时，用
el.toggleAttribute('open')切换目标tr.detail-row的open属性，CSS 通过.detail-row:not([open]) { display: none; }控制显隐 - 不要用
innerHTML拼接详情 HTML，尤其含用户数据时——优先用fetch加载后textContent插入，防 XSS - 多个展开项共存时，注意事件委托：给
tbody绑click，再用event.target.closest('[data-toggle="detail"]')判断是否点击了开关
详情内容过长导致表格错位？强制用 position: absolute 脱离文档流
当详情区块含大量文本、图片或嵌套表格时，tr 高度会被撑开，破坏原有表头对齐。此时不应强行限制 max-height 或 overflow，而应让详情浮层脱离表格布局：
立即学习“前端免费学习笔记（深入）”；
- 把详情内容移出
<table>，放在<div class="detail-overlay">中，用position: absolute定位到对应行下方 - 用
getBoundingClientRect()获取触发行的位置，动态设置top和left，并监听scroll重算位置（或用position: fixed+ 页面坐标） - 务必加
aria-expanded和aria-controls属性，例如：<button aria-expanded="false" aria-controls="detail-101">，否则屏幕阅读器无法感知状态变化
移动端点按不灵敏？别忽略 touch-action 和最小点击区域
在 iOS Safari 或安卓 Chrome 上，表格行内按钮常出现「点一下没反应、要点两下才触发」，本质是浏览器误判为滑动操作：
- 给展开按钮加
style="touch-action: manipulation;"，明确告诉浏览器这是点击目标 - 确保按钮尺寸 ≥ 44×44px（iOS 最小触控区），可用
padding扩展，别只靠文字大小撑开 - 避免在
tr上同时绑click和touchstart，容易触发双事件；统一用pointerdown更可靠 - 如果用了
details，iOS 16+ 已修复大部分触摸问题，但 iOS 15 及更早仍建议加cursor: pointer提示可点
细节决定体验：展开动画不是必须加，但一旦加，别用 display: none → block 切换——它无法过渡；改用 max-height + transition，或用 @keyframes 控制 transform: scaleY() 更稳妥。
