正确做法是将详情行作为独立插入主行下方，用class控制显隐，确保同属一个；需动态计算colspan、用JS管理状态、避免CSS :has()、封装组件保证DOM顺序，并注意第三方表格库的兼容限制。
用 <tr> 嵌套 <code><tr> 实现展开行，但必须绕过表格语义限制
<p>HTML 标准里 <code><tr> 只能是 <code><tbody> 的直接子元素，不能嵌套在另一个 <code><tr> 里。强行写 <code><tr></tr>
<tr>...</tr>
会导致浏览器自动修复 DOM（比如把内层 <tr> 提到外层同级），展开逻辑直接失效。
<p>正确做法是：把详情行作为独立 <code><tr> 插入原行下方，用 class 控制显隐，并确保它和目标行属于同一 <code><tbody>：
<pre class="brush:php;toolbar:false;"><tbody>
<tr class="expandable">
<td>订单 #123</td>
<td>¥299</td>
</tr>
<tr class="detail-row hidden">
<td colspan="2"><div>收货人：张三，地址：XX路1号…</div></td>
</tr>
</tbody></pre>
<ul><li>详情 <code><tr> 必须紧跟在对应主行之后，DOM 顺序决定视觉连贯性
<li>
<code>colspan 值要等于表格实际列数（不能写死为 2，动态列需 JS 计算）
hidden 或自定义 class（如 is-collapsed）控制显隐，避免用 display: none 直接写在 style 里——否则 JS 切换时易冲突用 JavaScript 控制展开/折叠状态，别依赖 CSS :has()
:has() 虽能实现纯 CSS 展开（比如 tr.expandable:has(+ tr.detail-row)），但 Safari 15.4+ 才支持，且无法响应 JS 动态插入的详情行。生产环境必须用 JS 绑定点击和状态管理。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 点击主行时，查找紧邻的下一个
<tr class="detail-row">，切换其 <code>hidden属性或 class - 维护一个状态标记（如
data-expanded="true"），避免靠 class 存在与否判断——class 可能被其他逻辑干扰 - 如果表格支持排序或分页，展开状态不会自动保留，需在重绘后手动恢复（例如监听 DataTables 的
draw.dt事件） - 详情
<tr> 内部用 <code><td><div class="detail-content">...</div></td>包一层 - 对
.detail-content做max-height过渡，配合opacity和visibility实现渐显 - 主行 hover 时，同时影响详情行背景色（用相邻兄弟选择器
.expandable:hover + .detail-row），否则鼠标移到详情区会突然失去高亮 - 边框统一用
border-collapse: collapse，并给.detail-row td单独设border-top: none，避免双线 - 把每组「主行 + 详情行」封装成一个组件，内部用
slot或 props 传数据，确保 DOM 结构可控 - React 中不要用
map().flat()拼接主行和详情行数组，改用flatMap并返回二维数组（[mainRow, detailRow]），再flat(1) - 框架内状态更新后，如果详情行高度变化，可能需要手动触发
resize或重新计算max-height，纯 CSS 过渡不适用
细节样式处理：border、hover、高度过渡容易出问题
默认 <tr> 没有 <code>height，transition: height 对 <tr> 无效；直接给 <code><td> 设 <code>max-height + overflow: hidden 又会破坏表格布局。
稳妥方案：
React/Vue 等框架里，避免在循环中直接操作 DOM
比如 Vue 的 v-for 渲染表格时，若在模板里写 <tr v-for="item in list">...</tr>
<tr class="detail-row">...</tr>，Vue 会把第二个 <tr> 当作独立节点渲染，无法保证它一定紧跟在对应主行之后——尤其开启 <code>key 优化或列表过滤时。
最麻烦的其实是跨框架兼容：当表格被第三方库（如 ag-Grid、Handsontable）接管时，它们根本不允许你往 <tbody> 里自由插 <code><tr>，这时候只能退回到用 <code><details><summary></summary></details> 或绝对定位浮层——但那就不是“行内详情”了。
