要让textarea填满表格单元格，需设display:block、width:100%、box-sizing:border-box和min-height；换行显示用white-space:pre-line；焦点滚动用scrollintoview；软键盘遮挡需js延迟滚动适配。
textarea 默认撑不满表格单元格，怎么让它填满？
直接把 <textarea></textarea> 放进 <td> 里，默认宽度只占内容宽度，高度也只有一行——这不是“多行备注”的本意。必须显式控制尺寸，且要兼顾表格布局约束。
<p>关键不是设 <code>width:100%，而是用 display:block + width:100% + box-sizing:border-box，否则 padding 和 border 会让它溢出单元格。高度建议用 min-height（比如 60px），而不是固定 height，避免用户输入少时留大片空白。
<td><textarea style="display:block; width:100%; min-height:60px; box-sizing:border-box; padding:4px;"></textarea></td>- 不要给
<textarea></textarea>设margin，表格单元格本身没有 margin 概念，加了反而错位 - 如果表格用了
table-layout:fixed，textarea的width:100%才能可靠生效
为什么回车后内容不换行、显示成一长串？
HTML 渲染时会把换行符当空格处理，<textarea></textarea> 里敲的 \n 不会自动变成 <br>。提交或展示时若直接插进 <td> 的 innerHTML，就丢失换行。
<p>真正需要的是：输入时保留换行，存/传时保持 <code>\n，渲染时用 CSS 或 JS 处理显示。最轻量做法是加一行 CSS：
- 对存放备注的
<td>（非 <code><textarea></textarea>）加white-space:pre-line，这样纯文本显示时自动把\n转成换行 - 如果用 JS 动态更新显示区域（比如预览），别用
innerText，改用textContent或手动.replace(/\n/g, '<br>') - 服务端接收时确认没过滤掉
\n字符（有些框架默认 trim 或 sanitize） - 给每个
<textarea></textarea>加onfocus="this.closest('tr').scrollIntoView({block:'nearest'});" - 避免用
block:'center'，容易把整行顶出视图顶部 - 如果表格行高不固定，
scrollIntoView可能不准，这时改用getBoundingClientRect()判断是否在视口内再滚动 - iOS 键盘高度约 216–260px，Android 约 200–300px，不能写死数值
- 推荐用
window.visualViewport?.height对比window.innerHeight估算键盘高度（iOS 16+/Chrome 89+ 支持） - 更稳妥的做法：聚焦后
setTimeout(() => { element.scrollIntoView({behavior:'smooth'}); }, 100)，给浏览器留出重排时间 - 别在
resize事件里做滚动，容易循环触发
表格里多个 textarea 同时聚焦时滚动错位怎么办？
在可滚动的表格容器（如 <div style="max-height:400px; overflow:auto"><table>...</table></div>）中，点击某个 <textarea></textarea> 触发软键盘或焦点，浏览器可能没正确滚动到可视区——尤其在 iOS Safari 或旧版 Android 上。
这不是 <textarea></textarea> 自身问题，而是表格行内元素焦点滚动逻辑弱。临时解法是加简单 JS 监听：
移动端软键盘弹起遮挡 textarea 怎么办？
Android 和 iOS 都存在这个问题：软键盘弹出后，<textarea></textarea> 被盖住，用户看不到自己正在输什么。纯 CSS 几乎无解，必须靠 JS 微调。
核心思路是监听 focus 事件后延迟滚动，并预留键盘高度空间。但要注意不同系统键盘高度差异大：
textarea 在表格里看着简单，但真实场景里每一步都卡在浏览器渲染细节和移动端兼容性上——尺寸、换行、滚动、键盘，四个点全得单独验，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
