不能直接给 <td> 加 contenteditable="true"，因会破坏表格布局、回车插入 <div>、移动端兼容性差；应改用 <span> 或 <div> 嵌套并设置 display 和 white-space 等样式，拦截回车保存、妥善处理移动端焦点与键盘。
contenteditable 能让表格单元格变成可编辑区域，但直接加在 <td> 上容易出问题——光标跳动、回车行为异常、样式错乱、移动端兼容性差，不是“加上就能用”。
为什么不能直接给 <td> 加 contenteditable="true"
浏览器对 <td> 的默认样式和事件处理有强约束：contenteditable 会干扰表格布局计算，导致单元格高度塌陷或文字溢出；回车键默认插入 <div> 而非换行，破坏表格结构；部分 Safari 和旧版 iOS WebView 会忽略该属性或触发渲染 bug。
- 优先改用
<span>或<div>嵌套在<td>内，再对其设置contenteditable - 必须显式设置
display: inline-block或display: block，避免内联元素换行异常 - 禁用默认的
user-select: text可能引发双击选中整行的问题，需额外加user-select: text保证可编辑
如何让编辑内容不破坏表格宽度和换行
可编辑区域默认会撑开 <td>，尤其输入长文本时列宽失控。关键不是限制输入长度，而是控制容器行为。
- 给包裹的
<span>设置white-space: pre-wrap，保留换行但允许折行 -
<td>加max-width: 200px（按需调整）+overflow: hidden，配合text-overflow: ellipsis显示省略号 - 避免在
contenteditable元素上设width: 100%，它会继承父级<td>的计算宽度，而后者受表格自动布局影响不稳定
怎样拦截回车键并提交编辑结果
默认回车会在可编辑区域插入 <div>，这不是我们想要的“保存并退出编辑”动作。
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown事件，检测event.key === 'Enter'且!event.shiftKey - 调用
event.preventDefault()阻止默认插入行为 - 用
element.innerText获取纯文本（避免带<br>或空<div>），清理前后空格后写入数据源 - 编辑完成后移除
contenteditable属性，并恢复原始<td>的 focus 状态（如需继续编辑其他单元格）
移动端键盘收起与焦点管理的实际坑
iOS Safari 下，contenteditable 元素获得焦点后键盘弹出，但点击空白处无法收起键盘，且 blur 事件延迟严重。
- 不要依赖
blur触发保存——改用点击表格外部区域 +setTimeout(..., 0)延迟读取值 - 为防止键盘遮挡，给
<body>加scrollIntoView({ behavior: 'smooth', block: 'nearest' })滚动到编辑单元格 - Android Chrome 对
contenteditable的input事件支持不一致，建议同时监听input和compositionend
真正麻烦的不是让单元格变可编辑，而是让编辑过程稳定、可控、不污染 DOM 结构。多数人卡在回车处理和移动端焦点回收上，而不是属性本身怎么写。
