直接在表格单元格中嵌入<input>标签即可，无需额外包裹标签；需设置name属性以确保表单提交时包含该字段，推荐添加data-row和data-col便于JS定位；避免width:100%，改用padding控制内边距；根据场景选择合适type并注意兼容性；需手动实现方向键焦点切换及移动端滚动适配；样式上应单独重置表格内input的边框、背景与内边距。
表格单元格里直接放 <input> 就行，别套多余标签
HTML 表格本身不禁止在 <td> 或 <th> 里嵌入表单控件，<input> 是最常用也最直接的方式。很多人卡在加了 <div> 或 <p> 包一层，结果样式错乱、焦点异常，甚至 submit 时拿不到值。
正确做法就是：<td><input type="text" name="cell_0_1"></td> —— 没有中间商，没有 wrapper。
-
name属性必须设，否则提交时该字段不会被包含（尤其用传统 form 提交时） - 如果用 JS 动态读取值，推荐统一加
data-row和data-col，比如<input data-row="2" data-col="3" value="abc"> - 避免给
<input>设固定width: 100%，它默认会撑满父<td>；若要留边距，改用padding，别动width
input 类型选错会导致语义或行为异常
不是所有 input 都适合表格场景。比如用 type="number" 时，用户粘贴含字母的字符串会被清空；用 type="email" 会在失焦时校验格式，但表格常需临时存草稿，未必立刻验证。
- 通用编辑：用
type="text"最稳妥，兼容性好，无隐式校验 - 数值列且需前端约束：用
type="number"，但务必加step="any"支持小数，否则1.5会被拒绝 - 日期列：优先用
type="date"，但注意 Safari 对value格式要求严格（必须是YYYY-MM-DD），填错就变空 - 禁用自动补全干扰：加
autocomplete="off"，尤其当表格多行同名name时，浏览器可能把上一行的值填进下一行
聚焦和键盘导航容易断链，得手动补逻辑
原生表格按 Tab 键跳转时，<input> 会参与 tabindex 流程，但方向键（上下左右）默认不移动焦点 —— 用户想用方向键在单元格间切换，就得自己监听 keydown。
立即学习“前端免费学习笔记（深入）”；
- 监听
ArrowUp/ArrowDown时，先用event.preventDefault()阻止光标在 input 内移动 - 计算当前
<input>所在的<tr>和<td>索引，再定位到相邻单元格的<input>并.focus() - 注意边界：最后一行按
ArrowDown不应 focus 到不存在的下一行，得兜底处理 - 移动端软键盘弹起后，滚动位置可能偏移，
.focus()后建议调用element.scrollIntoView({block: 'nearest'})
样式冲突常见于 reset.css 或框架默认规则
很多项目引入了全局重置样式（如 input { margin: 0; border: 1px solid #ccc; }），导致表格内 <input> 边框和 padding 与周围单元格不齐，看起来像“陷进去”或“凸出来”。
- 最简解法：给表格内的 input 单独写样式，例如
table input { border: none; background: transparent; padding: 4px 8px; } - 如果用了 Bootstrap 或 Tailwind，注意它们会给
input加border和rounded，而表格通常需要直角+无边框 - 高度对齐问题：设置
line-height和box-sizing: border-box，避免因 padding 导致行高撑开 - 文字垂直居中难？别碰
vertical-align，直接让input的height和line-height一致即可
表格内输入真正麻烦的从来不是放不放得进去，而是焦点管理、样式收敛和数据映射这三个点——尤其是多人协作时，有人改了全局 input 样式，表格里的输入框就集体“变形”，查起来费半天劲。
