不能直接包裹，必须用结构；colspan需匹配列数，summary需重置样式，详情内容用div包裹防溢出，js监听toggle事件实现单开逻辑。
details 标签不能直接包裹 ，这是关键限制
HTML 规范明确禁止 <details></details> 作为 <tbody> 或 <code><table> 的直接子元素去包裹 <code><tr>——浏览器会自动“修复” DOM，把 <code><details></details> 移到表格外部，导致结构断裂、样式错乱、点击无响应。这不是浏览器 bug，是 HTML tree 构建规则决定的。
可行路径只有一条：放弃“用 <details></details> 包 <tr>”，改用语义等价但合法的嵌套方式。
<h3>正确结构：用 <code><tr> 包 <code><details></details>，再用 <td colspan> 覆盖整行
<p>把展开控件和详情内容都放进一个独立的 <code><tr>，该行只有一个 <code><td>，并设置 <code>colspan 等于表格列数。这样既保持表格结构完整，又复用 <details></details> 的原生折叠逻辑。
<tr class="toggle-row"><td colspan="4"><details><summary>点击查看详情</summary><div>…</div></details></td></tr>-
colspan 值必须与当前 <thead> 或主体列数严格一致，动态表格需 JS 计算后写入
<li>
<code><summary></summary> 内容可放图标（如 ▾），但避免纯空格或不可见字符，否则无障碍支持失效
- 不要给
<details></details> 设 display: block 或 width: 100%，它默认块级且撑满父 <td>
<h3>样式与交互要点：避免默认箭头错位和滚动异常</h3>
<p>原生 <code><summary></summary> 的小箭头在表格中常偏移、缩放失真，且展开后 <details></details> 内容若含长文本或内联元素，容易撑破 <td> 导致横向滚动或换行混乱。
<ul>
<li>重置 summary 默认样式：<code>summary { list-style: none; padding: 8px 12px; cursor: pointer; }，再用 ::marker 或伪元素自定义箭头
- 详情区域（
<details></details> 内部）建议用 <div style="padding: 8px; overflow-x: auto;"> 包裹内容，防溢出
<li>为避免展开时表格高度突变影响其他行，给 toggle <code><tr> 加 <code>transition: height 0.2s ease 不生效（<tr> 高度无法过渡），改用 <code>max-height + overflow: hidden 在 <td> 上做动画更可靠
<h3>JavaScript 补充：监听 open 状态并同步 UI 状态</h3>
<p><code><details></details> 的 open 属性变化不会触发 change 事件，需监听 toggle 事件；且多个详情行共存时，常需“展开一个、收起其余”，这得靠 JS 协调。
- 监听展开动作：
document.addEventListener('toggle', e => { if (e.target.tagName === 'DETAILS') { console.log(e.target.open) } })
- 实现单开逻辑：给所有
<details></details> 统一 class（如 js-details），点击时遍历关闭其他，再切换当前
- 注意：
e.target.open 是布尔值，但初始状态由 HTML open 属性决定，JS 修改需用 el.open = true/false，而非 setAttribute
细节上最易被忽略的是 colspan 动态计算和 toggle 事件监听时机——如果表格是 JS 渲染的，必须等 DOM 插入完成再绑定事件，否则监听无效。
HTML 规范明确禁止 <details></details> 作为 <tbody> 或 <code><table> 的直接子元素去包裹 <code><tr>——浏览器会自动“修复” DOM，把 <code><details></details> 移到表格外部，导致结构断裂、样式错乱、点击无响应。这不是浏览器 bug，是 HTML tree 构建规则决定的。
可行路径只有一条：放弃“用 <details></details> 包 <tr>”，改用语义等价但合法的嵌套方式。
<h3>正确结构：用 <code><tr> 包 <code><details></details>，再用 <td colspan> 覆盖整行
<p>把展开控件和详情内容都放进一个独立的 <code><tr>，该行只有一个 <code><td>，并设置 <code>colspan 等于表格列数。这样既保持表格结构完整，又复用 <details></details> 的原生折叠逻辑。
<tr class="toggle-row"><td colspan="4"><details><summary>点击查看详情</summary><div>…</div></details></td></tr>-
colspan值必须与当前<thead> 或主体列数严格一致，动态表格需 JS 计算后写入 <li> <code><summary></summary>内容可放图标（如▾），但避免纯空格或不可见字符，否则无障碍支持失效 - 不要给
<details></details>设display: block或width: 100%，它默认块级且撑满父<td> <h3>样式与交互要点：避免默认箭头错位和滚动异常</h3> <p>原生 <code><summary></summary>的小箭头在表格中常偏移、缩放失真，且展开后<details></details>内容若含长文本或内联元素，容易撑破<td> 导致横向滚动或换行混乱。 <ul> <li>重置 summary 默认样式：<code>summary { list-style: none; padding: 8px 12px; cursor: pointer; }，再用::marker或伪元素自定义箭头 - 详情区域（
<details></details>内部）建议用<div style="padding: 8px; overflow-x: auto;"> 包裹内容，防溢出 <li>为避免展开时表格高度突变影响其他行，给 toggle <code><tr> 加 <code>transition: height 0.2s ease不生效（<tr> 高度无法过渡），改用 <code>max-height+overflow: hidden在<td> 上做动画更可靠 <h3>JavaScript 补充：监听 open 状态并同步 UI 状态</h3> <p><code><details></details>的open属性变化不会触发change事件，需监听toggle事件；且多个详情行共存时，常需“展开一个、收起其余”，这得靠 JS 协调。- 监听展开动作：
document.addEventListener('toggle', e => { if (e.target.tagName === 'DETAILS') { console.log(e.target.open) } }) - 实现单开逻辑：给所有
<details></details>统一 class（如js-details），点击时遍历关闭其他，再切换当前 - 注意：
e.target.open是布尔值，但初始状态由 HTMLopen属性决定，JS 修改需用el.open = true/false，而非setAttribute
细节上最易被忽略的是 colspan 动态计算和 toggle 事件监听时机——如果表格是 JS 渲染的，必须等 DOM 插入完成再绑定事件，否则监听无效。
- 监听展开动作：
