能，但必须确保<summary>是<details>的直接子元素且不被块级元素包裹；正确写法为<td><details><summary>标题</summary><p>内容</p></details></td>，禁用button/input嵌套及float/block样式。
details 和 summary 能不能直接塞进 <td> 里？
能，但必须严格满足结构约束：<summary> 必须是 <details> 的第一个子元素，且不能被任何块级容器（比如 <div>、<p>）包裹在中间。表格单元格本身是内联上下文，但只要嵌套层级干净，它完全支持。
常见错误是写成这样：
<td> <div><details><summary>标题</summary><p>内容</p></details></div> </td>
这种写法在 Safari 中大概率失效——<summary> 不再是 <details> 的直接子元素，点击无响应。
- ✅ 正确写法：
<td><details><summary>标题</summary><p>内容</p></details></td></li> <li>✅ 允许的后续内容：<code><p>
、<ul>、<table>等，只要不打断<details>→<summary>的直系父子关系 - ❌ 禁止在
<summary>内放<button>、<input>或其他可聚焦控件，会抢事件或导致行为不一致
表格里用 details 时样式塌陷或对齐错乱怎么办？
默认情况下，<summary> 是 inline-level 元素，而 <td> 默认是 table-cell，两者盒模型叠加容易引发垂直对齐、行高撑开等问题。尤其在多行文本折叠后，<summary> 可能被截断或换行异常。
立即学习“前端免费学习笔记（深入）”；
- 给
<summary>加display: inline-block或display: table-cell，避免被 td 的 vertical-align 拉偏 - 禁用
float和display: block—— 这两类声明会破坏原生 toggle 行为，在 Chrome/Firefox 中可能点不动 - 用
white-space: nowrap防止标题意外折行；配合text-overflow: ellipsis+overflow: hidden控制溢出（需设固定宽或 max-width） - 若需图标对齐，用
summary::before插入伪元素，而非额外标签，避免干扰点击区域
如何让表格中的 details 默认展开？
直接加 open 属性就行，但要注意：在表格中多个 <details open> 并列时，页面加载瞬间可能因重排造成轻微抖动，尤其列宽未固定时。
- 推荐搭配
table-layout: fixed和明确的<col>宽度，减少 layout thrashing - 不要依赖 JS 动态设置
.open = true来“模拟默认展开”——这会触发两次渲染（初始关闭 → JS 设置打开），体验更差 - 如果需要条件性默认展开（例如根据数据字段判断），服务端直接输出
<details open>更稳妥
监听表格内 details 的展开/收起状态变化
用 toggle 事件最可靠，它只在 open 属性实际变更后触发，且兼容所有现代浏览器（Chrome 55+、Firefox 49+、Safari 11.1+、Edge 79+）。
document.querySelectorAll('td details').forEach(el => {
el.addEventListener('toggle', () => {
console.log('当前状态：', el.open);
// 这里可以触发统计上报、懒加载内容、或更新关联单元格样式
});
});
- 别用
click监听<summary>—— 它无法区分是展开还是收起，也无法捕获键盘操作（Space/Enter）触发的行为 - 事件对象
e.target就是那个<details>元素，无需额外查找父级 - 如果表格动态渲染（如 Vue/React），确保事件监听绑定在元素挂载后，且在卸载时移除，避免内存泄漏
<details> 看似简单，真正踩坑的地方不在功能实现，而在**结构洁癖**和**样式边界控制**——哪怕多一层 <span> 包裹 <summary>，都可能让 Safari 彻底失灵。 
