在指定 中插入 必须将其置于 或 内，不可直接放在 下；推荐用 CSS 控制尺寸（如 width: 100%; min-height: 80px），并确保父单元格未禁用交互（如 pointer-events: none）。
怎么在指定 里插入 直接把 就行，不需要额外包裹或 JS 注入。表格行本身不“显示”内容，真正承载控件的是单元格。常见错误现象： 里但没包 ，浏览器会自动修正结构（比如把 - 必须确保
或 内部，哪怕只是空单元格也要写全标签- 如果该行已有其他列，注意列数对齐——少写一个
，整行视觉可能塌陷或错列- 不要用
colspan 或 rowspan 覆盖目标单元格后再塞
rows/cols 还是 CSS？
rows 和 cols 是 HTML 属性，只提供初始渲染参考值，实际宽高由 CSS 主导。现代项目中优先用 CSS 控制，更稳定、可复用。
-
rows="4" 表示“默认显示 4 行文本”，但字体、行高、padding 会影响真实高度；cols="30" 同理，受等宽字体假设限制
- 推荐写法：
resize: vertical 禁止横向拖拽
- 如果表格用了
table-layout: fixed，width: 100% 可能失效，此时改用 width: calc(100% - 4px) 抵消边框/内边距误差
为什么点击后
多数情况是 CSS 阻断了用户交互，不是 HTML 结构问题。
- 检查父级
是否设置了 pointer-events: none 或 user-select: none-
tabindex="-1" 或 disabled，也会拒绝聚焦；readonly 允许聚焦但不能编辑
- 某些 CSS 框架（如 Bootstrap）会给
display: block，而表格单元格默认是 display: table-cell，冲突时可能造成布局抖动——加 vertical-align: top 到 可缓解动态插入时，document.createElement('textarea') 怎么绑定到特定行？
关键不是找 ，而是定位到它内部的某个 。用 querySelector 配合属性或索引最稳妥。
- 按位置：假设要插到第 2 行第 3 列，
document.querySelector('tr:nth-child(2) td:nth-child(3)')，再 appendChild(textareaEl)
- 按语义：给目标
加 data-role="comment-input"，然后 document.querySelector('td[data-role="comment-input"]')- 避免用
innerHTML += '' 拼接——会销毁已有事件监听器和输入状态；始终用 appendChild 或 replaceChildren
真正容易被忽略的是：表格行高由内容撑开，但 box-sizing: border-box + 显式设置 height 或 min-height。
直接把 常见错误现象： 多数情况是 CSS 阻断了用户交互，不是 HTML 结构问题。 关键不是找 真正容易被忽略的是：表格行高由内容撑开，但 写进目标 就行，不需要额外包裹或 JS 注入。表格行本身不“显示”内容，真正承载控件的是单元格。 放在 里但没包 ，浏览器会自动修正结构（比如把 移到表格外），导致渲染错位或 DOM 不可控。 在 或 内部，哪怕只是空单元格也要写全标签 ，整行视觉可能塌陷或错列 colspan 或 rowspan 覆盖目标单元格后再塞 ，容易触发渲染异常，尤其在旧版 IE 或 Safari 中
的尺寸控制：用 rows/cols 还是 CSS？rows 和 cols 是 HTML 属性，只提供初始渲染参考值，实际宽高由 CSS 主导。现代项目中优先用 CSS 控制，更稳定、可复用。
rows="4" 表示“默认显示 4 行文本”，但字体、行高、padding 会影响真实高度；cols="30" 同理，受等宽字体假设限制 —— 强制宽度撑满单元格，设最小高度防压缩，resize: vertical 禁止横向拖拽table-layout: fixed，width: 100% 可能失效，此时改用 width: calc(100% - 4px) 抵消边框/内边距误差为什么点击后
不聚焦或光标不出现？ 是否设置了 pointer-events: none 或 user-select: none 自身若设了 tabindex="-1" 或 disabled，也会拒绝聚焦；readonly 允许聚焦但不能编辑 加 display: block，而表格单元格默认是 display: table-cell，冲突时可能造成布局抖动——加 vertical-align: top 到 可缓解 动态插入时，
document.createElement('textarea') 怎么绑定到特定行？，而是定位到它内部的某个 。用 querySelector 配合属性或索引最稳妥。
document.querySelector('tr:nth-child(2) td:nth-child(3)')，再 appendChild(textareaEl)
加 data-role="comment-input"，然后 document.querySelector('td[data-role="comment-input"]')innerHTML += '' 拼接——会销毁已有事件监听器和输入状态；始终用 appendChild 或 replaceChildren
默认有上下 padding 和 border，若未重置，会导致单元格高度突变、相邻行错位。建议统一用 box-sizing: border-box + 显式设置 height 或 min-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
