details标签支持表格嵌套，但需配合CSS实现滚动、固定表头等效果；常见问题源于样式缺失而非标签限制，须用table-wrapper嵌套并设置overflow-x:auto等属性。
details 标签本身不支持表格嵌套渲染？
不是不支持，而是 <details> 只负责控制显隐逻辑，它对子内容完全“无感”——你可以往里面放 <table>、<div> 甚至 <iframe>，但浏览器默认不会给表格加样式或处理表头冻结。常见错误是直接写 <details><table>...</table></details>
问题往往出在视觉上：折叠时看不到滚动条、展开后表格撑破容器、移动端列错位。这不是 <details> 的 bug，而是没配好配套的 CSS。
- 必须给
<details>或其父容器设固定高度/最大高度 +overflow-y: auto，否则长表格会把页面顶开 -
<table>建议用table-layout: fixed配合width: 100%，防止列宽随内容暴走 - 如果想固定首行表头（
<thead>），得额外加position: sticky和top: 0，且父容器需有overflow: visible（注意：这和上面的auto冲突，得用 wrapper 嵌套解决）
如何让参数对比表在展开时可横向滚动
参数多、列数多时，用户需要左右滑动看全字段，但默认 <details> 容器不会自动启用横向滚动。关键不是改 <details>，而是控制它的直接子元素。
推荐结构：<details><div class="table-wrapper"><table>...</table></div></details>
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
.table-wrapper设overflow-x: auto、overflow-y: hidden，并加white-space: nowrap防止文字换行干扰宽度计算 -
<table>设min-width: max-content（或具体值如min-width: 1200px），强制它不被压缩 - 移动端建议加
-webkit-overflow-scrolling: touch提升滚动顺滑度（iOS Safari 旧版必需）
summary 标签里放什么内容更实用
<summary> 是唯一能点击触发展开的区域，别只写“点击查看参数”。用户扫一眼就要知道这个表的价值点。
- 写清对比维度，比如
<summary>CPU / 内存 / 存储三项核心参数对比</summary> - 带数据提示更有效：
<summary>7 款机型参数对比（含 3 款新品）</summary> - 避免空标签或纯图标——屏幕阅读器可能读不出内容，也影响 SEO
- 不要在
<summary>里放<table>或复杂布局，某些浏览器（如旧版 Firefox）会渲染异常
兼容性与降级方案怎么写才不翻车
<details> 在 Chrome 12+、Firefox 49+、Safari 6+ 支持良好，但 IE 完全不支持，Edge 12–18 也有 bug（比如 open 属性不生效）。不能靠 JS 全量重写交互。
- 基础降级：用
@supports (display: details) {}包裹增强样式，不支持时让表格常驻显示（不折叠） - JS 补丁只需做两件事：检测是否不支持
<details>，然后给<details>加open属性，并绑定 click 切换open类名（不用模拟整个组件） - 慎用第三方 polyfill（如 details-polyfill），它们常劫持原生事件，和现代框架（React/Vue）的 DOM 管理冲突
最麻烦的其实是打印样式——<details open> 在打印预览里不一定展开，得单独写 @media print { details[open] > * { display: block; } } 强制显示。
