表格行尾加备注应直接在每行末尾添加包裹，确保结构合法、宽度可控（如width:100%;resize:vertical），并用data-row-id关联数据以便JS取值。
表格行尾加文本域：用 <td> 包裹 <code><textarea></textarea> 最直接
HTML 表格本身不提供“备注列”语义，但实际需求就是让每行末尾有一个可编辑的备注输入区。最稳妥的做法是手动在每行（<tr>）末尾加一个 <code><td> 单元格，里面放 <code><textarea></textarea>。不要试图用 <colgroup></colgroup> 或 CSS 伪元素“注入”，那些无法承载表单控件。
常见错误是把 <textarea></textarea> 放在 <tr> 外面、或嵌套在 <code><th> 里导致结构非法；还有人用 <code><input type="text"> 替代，结果备注内容换行就截断——必须用 <textarea></textarea>。
- 确保每个
<tr> 的 <code><td> 数量一致，否则表格渲染错位 <li>给 <code><textarea></textarea>设rows和cols（或用 CSS 控制宽高），否则默认太小 - 如果表格有固定布局（
table-layout: fixed），需为备注列设明确宽度，否则可能被压缩 -
<textarea></textarea>内联样式写成style="width: 100%; height: 60px; resize: vertical;"，允许纵向拉伸但不横向乱跑 - 避免对
<textarea></textarea>设min-width，它会强制撑开父<td> <li>若用 CSS 类，务必检查是否被全局样式（如重置库）覆盖了 <code>box-sizing，应显式设box-sizing: border-box - 给每个
<textarea></textarea>加name如remark_123，其中123是该行数据的 ID（从后端传入或 JS 动态生成） - 更健壮的做法：用
data-row-id属性存 ID，提交前用document.querySelectorAll('textarea[data-row-id]')遍历取值并组装 JSON - 如果表格支持增删行，动态添加的
<textarea></textarea>必须同步绑定事件（推荐事件委托到<tbody>） <li>注意：<code><textarea></textarea>的值要用.value读取，不是.innerText或.textContent - 监听
focus事件，在<textarea></textarea>上调用.scrollIntoView({block: 'nearest'}) - 避免用
{block: 'center'}，会导致频繁跳动；'nearest'更平滑 - 慎用
scrollIntoViewIfNeeded()（已废弃），Safari 15.4+ 不再支持 - 如果表格在
position: fixed容器里，需额外计算滚动偏移，此时建议改用element.getBoundingClientRect().top判断是否在视口内
如何让备注列宽度自适应且不撑开整表
默认 <textarea></textarea> 会继承父 <td> 宽度，但用户拖拽调整大小后容易破坏布局。关键不是禁用 resize，而是从源头约束尺寸。
<ul><li>给备注列 <code><td> 加 <code>style="width: 200px; max-width: 200px;"（数值按需调整）
提交时怎么取到每行的备注值（JavaScript 绑定要点）
不能靠 name 属性直接映射——所有 <textarea></textarea> 如果都叫 remark，后端收到的只是最后一个值。得用唯一标识关联行数据。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
移动端键盘弹出后文本域被遮挡怎么办
这是 iOS Safari 和部分安卓浏览器的老问题：软键盘顶起页面，<textarea></textarea> 滚动到视口外却不可见。纯 HTML/CSS 无解，必须 JS 响应。
表格行尾加备注看着简单，真正上线要过三关：结构合法性、尺寸可控性、交互鲁棒性。尤其 <textarea></textarea> 在 <td> 里的盒模型行为，不同浏览器仍有细微差异，别省掉真机测试这步。</td>
