直接在表格单元格中嵌入标签即可，无需额外包裹标签；需设置name属性以确保表单提交时包含该字段，推荐添加data-row和data-col便于js定位；避免width:100%，改用padding控制内边距；根据场景选择合适type并注意兼容性；需手动实现方向键焦点切换及移动端滚动适配；样式上应单独重置表格内input的边框、背景与内边距。

表格单元格里直接放 <input> 就行，别套多余标签

HTML 表格本身不禁止在 <td> 或 <code><th> 里嵌入表单控件，<code><input> 是最常用也最直接的方式。很多人卡在加了 <div> 或 <code><p></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>；若要留边距，改用 <code>padding，别动 width

  input 类型选错会导致语义或行为异常

  不是所有 input 都适合表格场景。比如用 type="number" 时，用户粘贴含字母的字符串会被清空；用 type="email" 会在失焦时校验格式，但表格常需临时存草稿，未必立刻验证。

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 通用编辑：用 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> 和 <code><td> 索引，再定位到相邻单元格的 <code><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 样式，表格里的输入框就集体“变形”，查起来费半天劲。