合法，details标签内可放table，但必须作为其直接且首个子元素；否则可能被浏览器移出、点击失效或状态丢失。
details标签里放table是否合法？
合法，但必须完整写在<details></details>的直接子内容中，且<summary></summary>必须是它的第一个子元素。浏览器不会拒绝渲染，但若结构错位（比如<summary></summary>被<div>包着），<code><table>可能被移出、点击失效或状态丢失。
<h3>为什么表格在details里显示异常或边框消失？</h3>
<p>主因是父级样式污染：多数 CSS 重置或框架（如 Bootstrap）默认设了<code>border-collapse: collapse，而<details></details>本身不重置该属性，子<table>会继承并导致边框被“吃掉”或加倍。
<ul>
<li>必须给子表显式加<code>border-collapse: separate（不能写inherit或留空）
width: 100%——改用max-width: 100% + overflow-x: auto，尤其当父容器有table-layout: fixed时<th>默认加粗居中，易和父表冲突，建议用类名隔离，例如<code>.detail-table th { text-align: left; font-weight: normal; }
移动端点击summary没反应？常见原因
iOS Safari（≤17.4）和微信 X5 内核对<details></details>支持薄弱，若<summary></summary>里嵌了<img alt="HTML网页中details标签内嵌套表格的实现方法" >、<svg></svg>或<button></button>，点击事件常被劫持或忽略。
- 禁用
<summary></summary>内任何可聚焦元素（<input>、<button></button>） - 图标用
summary::before伪元素插入，而非真实标签 - 若需兼容旧环境，UA 检测后降级为
<div class="is-open"> + <code>button[aria-expanded]结构 - 确保
<table>是<code><summary></summary>的**直接兄弟节点**，中间不能插<p></p>或<div> <h3>如何让details里的表格语义清晰、无障碍可用？</h3> <p><code><details></details>本身已自带aria-expanded和键盘支持（空格/回车切换），但子表若无明确上下文，屏幕阅读器仍可能读作“表格”，不知其归属。立即学习“前端免费学习笔记（深入）”；
- 给子表加
aria-label="技术部人员明细"或aria-labelledby指向<summary></summary>的id <th scope="col">必须写全，不能省略<code>scope属性，否则列关联失效- 避免用
display: block或float修饰<summary></summary>，会破坏原生 focus 和 toggle 行为 - 折叠状态下，子表内容仍存在于 DOM 中，无需 JS 控制显隐——这是它比手写 JS 展开方案更可靠的地方 细节最易被忽略：不是所有“能渲染出来”的写法都算有效。DOM 结构一旦被浏览器自动修复（比如把
<details></details>提到<table>外），<code>toggle事件就永远监听不到，而你可能只在真机上才第一次发现点不动。 - 给子表加
