spellcheck 属性在 <table> 元素上完全无效，因其非可编辑文本容器；仅对 <textarea>、<input type="text"> 和 contenteditable="true" 元素生效，且需显式设置 spellcheck="true" 并满足系统及浏览器语言配置要求。
spellcheck 属性在 <table> 元素上完全无效——表格本身不可编辑，浏览器会直接忽略该属性。
为什么给 <table> 加 spellcheck="true" 没反应
拼写检查只作用于**可编辑的文本容器**，而 <table> 是结构型容器，不接受输入。即使你用 CSS 让单元格看起来像可编辑区域（比如 td { user-select: text } ），它依然不是浏览器认定的“可编辑上下文”。spellcheck 只对三类元素起作用：<textarea>、<input type="text">（或 search），以及显式设了 contenteditable="true" 的元素。
- 给
<table>、<tr>、<td>直接加spellcheck—— 浏览器静默丢弃，DOM 中都看不到该属性生效 - 只设
contenteditable="true"但漏掉spellcheck="true"—— 多数浏览器默认禁用拼写检查（包括 Chrome/Firefox） - 用 JS 动态给
td添加contenteditable和spellcheck—— 属性虽存在，但焦点进入后仍无波浪线，因缺少编辑上下文初始化
真正让表格单元格支持拼写检查的唯一方式
必须把每个需要拼写提示的单元格变成独立的、可编辑且明确启用拼写检查的元素。最稳妥的做法是：用 <textarea> 替代 <td> 内容，或在 <td> 内嵌一个带 contenteditable="true" 和 spellcheck="true" 的 <div>。
- ✅ 推荐：
<td><textarea spellcheck="true">Ths is a mistak</textarea></td>——<textarea>是拼写检查最稳定的载体，各浏览器行为一致 - ✅ 可行：
<td><div contenteditable="true" spellcheck="true">Ths is a mistak</div></td>—— 注意：子元素如<p>不继承spellcheck，必须单独写 - ❌ 避免：
<td contenteditable="true">Ths is a mistak</td>—— 缺少spellcheck="true"，默认不标红线；且 Safari 对td的contenteditable支持极弱
移动端和 Safari 的现实限制
即使 DOM 结构写对了，在 iOS Safari 或 Android Chrome 上，spellcheck 几乎不渲染红色波浪线——它们依赖系统键盘自身的拼写纠错，而非网页层提示。这意味着：
立即学习“前端免费学习笔记（深入）”；
- iOS 上，
spellcheck="true"对<textarea>或contenteditable元素基本无视觉反馈 - 若需禁用干扰（比如输入 API key 或 IP 地址），不能只靠
spellcheck="false"，必须组合：spellcheck="false"+autocorrect="off"+autocapitalize="none"+inputmode="verbatim" - 移动端测试时，别盯着波浪线，重点验证右键菜单是否出现“更正为…”选项（桌面端）或软键盘是否弹出建议（移动设备）
容易被忽略的兼容性细节
拼写检查不是“写了就灵”，它高度依赖运行时环境。以下任一条件缺失，都会导致红线消失：
- macOS 用户没勾选「系统设置 → 键盘 → 文本输入 → 在网页文本框中检查拼写」
- Chrome 用户未在
chrome://settings/languages中启用并安装对应语言词典 - 输入法处于中文模式（如搜狗拼音），即使打英文单词，也会拦截拼写反馈；需按
Shift切换到纯英文直输 - Firefox 用户需手动在
about:config中将layout.spellcheckDefault设为1（默认是0）
