details标签不能直接嵌套在table内部，否则破坏表格结构；正确做法是整表包裹或用tr+td colspan+details实现单行展开，需注意兼容性与可访问性。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

details 标签不能直接嵌套在

内部，否则会破坏表格结构

HTML 表格（<table>）有严格的 DOM 结构要求：<tr> 必须是 <tbody> 或 <thead> 的直接子元素，而 <details> 是块级元素，**不能作为 <tr> 的父容器或兄弟节点插入到表格行之间**。强行写成：

<table>
  <tr><td>标题</td></tr>
  <details><summary>展开</summary><tr><td>动态行</td></tr></details>
</table>

会导致浏览器自动修正 DOM：把 <details> 移出表格、或丢弃内部 <tr>，最终渲染异常甚至完全不可见。

• ✅ 正确做法：把整个 <table> 包在 <details> 里（整表折叠）
• ✅ 或用 <tr> + <td colspan="N"> + <details> 实现单行展开（N 为列数）
• ❌ 不要尝试让 <details> 成为 <tbody> 的子元素、或包裹 <tr>

单行展开：用 <tr> + <td colspan="N"> + <details>

这是最实用的表格内折叠方案——点击某行标题，下方展开额外信息，不破坏表格语义。

• <summary> 必须是 <details> 的第一个子元素，且不能被 <td> 外的标签包裹（如 <p>、<div>）
• colspan 值必须等于当前表格实际列数（硬编码或 JS 动态读取 document.querySelector('table').rows[0].cells.length）
• 折叠内容放在 <details> 内部，但**不要放 <tr>**；可用 <div> + 表格样式（display: table-row 等）模拟，或直接用语义化块级结构（<dl>、<ul>）
• 示例结构：

<table>
  <tr>
    <th>ID</th><th>名称</th><th>操作</th>
  </tr>
  <tr>
    <td>1</td><td>项目A</td><td>编辑</td>
  </tr>
  <tr>
    <td colspan="3">
      <details>
        <summary>查看详情</summary>
        <div class="detail-content">
          <p>状态：运行中</p>
          <p>最后更新：2026-07-08</p>
        </div>
      </details>
    </td>
  </tr>
</table>

监听 toggle 事件同步表格行高或样式

单纯展开 <details> 不会自动撑开 <tr> 高度——因为 <td colspan> 内容是块级流式布局，<tr> 不会响应其内部高度变化。需要手动干预：

立即学习“前端免费学习笔记（深入）”；

• 给 <td colspan> 加 style="vertical-align: top" 避免文字基线错位
• 监听 toggle 事件，根据 e.target.open 动态设置 <tr> 的 height 或 min-height（慎用固定 height，推荐 max-height + overflow: hidden 配合 transition）
• 更稳妥的做法：用 CSS 控制 <details> 内部 <div> 的 max-height 和 transition，而非动 <tr>
• 注意：不要绑定 click 到 <summary>，它无法捕获键盘触发（Space/Enter）且绕过可访问性逻辑

iOS Safari 和微信 X5 内核下 <details> 可能失效

旧版 iOS Safari（≤15.4）不解析 open 属性，微信 Android X5 内核（尤其 v8.0.4x 以下）甚至完全忽略 <details> 标签，渲染为空白或纯文本。

• 检测方式：用 'open' in document.createElement('details') 判断原生支持
• 降级方案：服务端或 JS 检测 UA 后，对不支持环境渲染 <div class="accordion"> + <button> + aria-expanded 结构
• 关键点：降级时仍需保持语义一致性——<button> 必须带 role="button" 和动态 aria-expanded，否则屏幕阅读器无法识别状态
• 别用 display: none 控制显隐，改用 hidden 属性或 visibility: hidden

真正容易被忽略的是：表格内折叠看似只是 UI 小功能，但一旦涉及跨浏览器兼容、可访问性和 DOM 结构约束，每个环节都可能连锁失效——尤其是 <details> 在表格中的位置，不是“能写出来”就等于“能正常工作”。