不会破坏表格结构，但必须置于内；放错位置会被DOM自动修正，导致样式丢失或JS找不到节点。
折叠行里放 <textarea></textarea> 会破坏表格结构吗？
不会，但必须放在 <td> 内——<code><textarea></textarea> 是合法的单元格内容，浏览器不会报错或移除它。问题出在位置：如果直接塞进 <tr> 或 <code><tbody> 外层、甚至误写在 <code><details></details> 的 <summary></summary> 同级，就可能被 DOM 自动修正，导致样式丢失或 JS 找不到节点。
用 <details></details> 包 <tbody> 时怎么嵌入可编辑文本域？
<p>必须确保 <code><textarea></textarea> 在折叠内容的最内层 <td> 中，且该 <code><td> 属于被 <code><details></details> 包裹的独立 <tbody>。常见错误是把 <code><textarea></textarea> 放在 <summary></summary> 里（触发区变输入区），或漏写 colspan 导致换行错位。
-
<details></details> 必须直接包裹 <tbody>，不能包裹 <code><tr> 或 <code><td>
<li>
<code><textarea></textarea> 要放在 <td colspan="N"> 内，<code>N 等于主表列数（动态列需 JS 计算）
- 避免给
<textarea></textarea> 设固定 width: 100% —— 表格单元格宽度由布局决定，应靠 width: 100%; box-sizing: border-box; 安全拉伸
- 若需默认值，用
value 属性而非 innerHTML，否则换行符不渲染
用独立 <tr> 实现折叠时如何插入 <code><textarea></textarea>？
这是更常用也更可控的方式：详情行作为普通 <tr> 插在主行下方，<code><textarea></textarea> 放进它的 <td> 里。关键不是“能不能放”，而是“怎么让它不撑开、不跳位、不干扰交互”。
<ul><li>详情 <code><tr> 必须紧跟主行，且同属一个 <code><tbody>，否则 CSS 相邻选择器（如 <code>.expandable:hover + .detail-row）失效
<td> 需设 <code>padding: 8px 和 vertical-align: top，否则 <textarea></textarea> 顶部对不齐
- 为支持高度过渡，建议外层套
<div class="textarea-wrapper">，对 wrapper 做 <code>max-height + overflow: hidden，而不是直接过渡 <textarea></textarea> 的 height
- JS 切换显隐时，别只改
hidden 属性——要同步调用 textarea.focus() 或 textarea.select()，否则用户点开后还得再点一次才能输入
为什么 <textarea></textarea> 在折叠区里经常无法获得焦点或光标偏移？
根本原因有两个：CSS 层叠干扰和 DOM 渲染时机。比如 transform: scale(0.95) 用在父容器上，会导致点击坐标计算偏移；又或者 JS 在 display: none 切换后立刻 focus()，但浏览器还没完成重排，焦点就丢了。
立即学习“前端免费学习笔记（深入）”；
- 禁用所有作用于
<textarea></textarea> 父级的 transform、filter 或 will-change，这些会创建新层叠上下文并影响事件捕获
- 聚焦逻辑要加微任务延迟：
setTimeout(() => textarea.focus(), 0) 或 queueMicrotask(() => textarea.focus())
- 如果表格用了第三方库（如 Element Plus 的
el-table），确认其 row-key 唯一且未重复，否则展开后 <textarea></textarea> 可能被复用到错误行
- 移动端 Safari 对表格内
<textarea></textarea> 的软键盘唤起有延迟，可加 inputmode="text" 提前提示输入类型
真正麻烦的不是放进去，而是让 <textarea></textarea> 在折叠/展开过程中保持尺寸稳定、焦点准确、滚动行为可控——这些细节在 DOM 结构松动或 CSS 层叠混乱时会集中爆发，调试时优先检查父级 overflow、transform 和是否意外触发了表格自动重绘。
<details></details> 必须直接包裹 <tbody>，不能包裹 <code><tr> 或 <code><td>
<li>
<code><textarea></textarea> 要放在 <td colspan="N"> 内，<code>N 等于主表列数（动态列需 JS 计算）
<textarea></textarea> 设固定 width: 100% —— 表格单元格宽度由布局决定，应靠 width: 100%; box-sizing: border-box; 安全拉伸value 属性而非 innerHTML，否则换行符不渲染用独立 <tr> 实现折叠时如何插入 <code><textarea></textarea>？
这是更常用也更可控的方式：详情行作为普通 <tr> 插在主行下方，<code><textarea></textarea> 放进它的 <td> 里。关键不是“能不能放”，而是“怎么让它不撑开、不跳位、不干扰交互”。
<ul><li>详情 <code><tr> 必须紧跟主行，且同属一个 <code><tbody>，否则 CSS 相邻选择器（如 <code>.expandable:hover + .detail-row）失效
<td> 需设 <code>padding: 8px 和 vertical-align: top，否则 <textarea></textarea> 顶部对不齐
<div class="textarea-wrapper">，对 wrapper 做 <code>max-height + overflow: hidden，而不是直接过渡 <textarea></textarea> 的 height
hidden 属性——要同步调用 textarea.focus() 或 textarea.select()，否则用户点开后还得再点一次才能输入为什么 <textarea></textarea> 在折叠区里经常无法获得焦点或光标偏移？
根本原因有两个：CSS 层叠干扰和 DOM 渲染时机。比如 transform: scale(0.95) 用在父容器上，会导致点击坐标计算偏移；又或者 JS 在 display: none 切换后立刻 focus()，但浏览器还没完成重排，焦点就丢了。
立即学习“前端免费学习笔记（深入）”；
- 禁用所有作用于
<textarea></textarea>父级的transform、filter或will-change，这些会创建新层叠上下文并影响事件捕获 - 聚焦逻辑要加微任务延迟：
setTimeout(() => textarea.focus(), 0)或queueMicrotask(() => textarea.focus()) - 如果表格用了第三方库（如 Element Plus 的
el-table），确认其row-key唯一且未重复，否则展开后<textarea></textarea>可能被复用到错误行 - 移动端 Safari 对表格内
<textarea></textarea>的软键盘唤起有延迟，可加inputmode="text"提前提示输入类型
真正麻烦的不是放进去，而是让 <textarea></textarea> 在折叠/展开过程中保持尺寸稳定、焦点准确、滚动行为可控——这些细节在 DOM 结构松动或 CSS 层叠混乱时会集中爆发，调试时优先检查父级 overflow、transform 和是否意外触发了表格自动重绘。
