不推荐给 <td> 直接加 contenteditable="true"——它破坏语义、输入失控、无法校验、移动端失效，且保存时数据脏乱；应改用双击替换为 <input> 的可控方案。
contenteditable 能让 <td> 看起来可编辑，但**不推荐用于真实表格编辑场景**——它会破坏语义、失控输入类型、无法校验、移动端几乎不可用，且保存时拿不到干净数据。
为什么直接给 <td> 加 contenteditable="true" 会出问题
这不是配置不对，而是浏览器根本没为表格单元格设计这套交互：
-
Tab键无法顺序跳转到下一个<td>，焦点乱飞 - 用户按
Enter，Chrome 插入<div>，Firefox 插入<p>，Safari 可能清空整格 - 粘贴 Word 内容会带
style、data-*、嵌套<span>，innerHTML里全是垃圾标签 -
textContent会混入换行符和零宽空格，数字列拦不住字母输入，邮箱列不校验格式 - iOS Safari 点击无响应，除非你加了
tabindex="0"+user-select: text+ 宽高样式，但光标仍常卡在开头
如何用 contenteditable 做「最低成本临时方案」
仅适用于内部工具、原型演示、数据量小且无需校验的场景。必须满足以下条件才可能勉强可用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给每个
<td>显式加tabindex="0"（否则 iOS 和部分 Android 根本点不动） - CSS 必须包含：
user-select: text; outline: none;，并设min-height: 1.2em和padding，否则视觉上“不可见” - 监听
input事件取textContent，别碰innerHTML；blur时做一次清洗：cell.textContent = cell.textContent.trim() - 拦截
Enter：event.key === 'Enter' && event.preventDefault()，否则结构崩坏 - 拦截
paste：event.preventDefault()后用event.clipboardData.getData('text/plain')插纯文本
真正可控的单元格编辑该怎么做
放弃 contenteditable，改用「双击替换为 <input>」模式，这是唯一能兼顾语义、校验、移动端和数据一致性的方案：
立即学习“前端免费学习笔记（深入）”；
- 监听
dblclick（不是click），避免与选中/排序等操作冲突 - 创建
<input type="text">，设置style="width:100%; height:100%; margin:0; padding:4px; border:1px solid #999;"，并严格对齐<td>尺寸 - 存原始值：
cell.dataset.originalValue = cell.textContent，Escape时还原 - 必须处理三个退出事件：
Enter（保存）、Escape（还原）、blur（兜底保存），缺一不可 - 保存逻辑不能只改 DOM，要定位到真实数据源：比如用
tr.dataset.id找行对象，再用cell.cellIndex映射字段名
真正难的不是让单元格“看起来能编辑”，而是确保每次输入都落到正确的数据字段、类型受控、撤销可靠、移动端键盘行为一致——这些 contenteditable 都不负责，得你一行行补。
