表格中input type="date"显示不全或点击失效，主因是浏览器将其视为内联元素，受padding、line-height和vertical-align影响；需设width:120px、box-sizing:border-box及vertical-align:middle。
为什么表格里放 input type="date 会显示不全或点不动
根本原因是浏览器把 input type="date" 当作内联元素，而 <td> 的 <code>padding、line-height 和默认 vertical-align 会挤压它的高度和宽度，导致右侧日历图标被裁掉、日期文本截断（比如只显示“2026-…”），甚至点击区域失效。
- 必须显式设
width: 120px——小于这个值，ISO 格式（如2026-08-04）无法完整显示 - 必须加
box-sizing: border-box，否则padding和border会让实际可编辑区域更窄 - 推荐在
<td> 上统一设 <code>vertical-align: middle，避免和文字基线错位 - 别依赖
min-width：某些浏览器仍按内容收缩，width才稳定 - HTML 中保留一个不可见的
<input type="date" id="real-date">，用于接收选择和提交数据 - 旁边放一个
<span id="display-date"></span>或<div contenteditable="false"> 作为显示层 <li>用 JavaScript 监听 <code>real-date的input或change事件，把value解析后格式化为MM/DD/YYYY，再写入显示层 - CSS 把
real-date设为position: absolute; opacity: 0; width: 1px; height: 1px;，完全隐藏但保留在 tab 顺序中 - 确认
input的父节点确实是<td>（打开 DevTools → Elements 面板检查 DOM 结构），别让它被浏览器自动塞进 <code><tbody> 或其它容器 <li>子表格若用了 <code>border-collapse: collapse，可能影响父表<td> 的内边距计算，间接压缩 <code>input空间 - 子表格设了
width: 100%但没重置table-layout: fixed，列宽可能塌缩，连带挤压内部input - 包含日期控件的
<td> 必须设 <code>overflow: visible，防止子表格或其它内容遮挡右侧小图标 - 绝对不要在
<tr> 直接写 <code>input——浏览器会把它踢出tr，DOM 就乱了要不要用第三方库替代原生
input type="date"如果你需要稳定显示自定义格式、跨浏览器一致、支持禁用日期、范围选择或中文 locale，原生控件很快会力不从心。这时候 Flatpickr、Pikaday 或原生
<input type="text">+pattern是更现实的选择：-
input type="text"+pattern="[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])"能做基础校验，但无法阻止用户输2026-02-30 - Flatpickr 初始化时设
dateFormat: "m/d/Y"，就能真正按需渲染，且自带键盘导航和 focus 管理 - 所有第三方方案都绕不开一个事实：你控制不了原生
input type="date"的 UI 渲染逻辑，它本质上是个黑盒
真正容易被忽略的是：即使你用 JS 格式化了显示层，表单提交时 value 仍是
YYYY-MM-DD，后端解析不能假设格式已变；如果前后端协议要求MM/DD/YYYY字符串，必须在提交前手动转换并覆盖原始字段。 -
怎么让表格里的日期输入框显示成 MM/DD/YYYY 格式
原生 input type="date" 的 value 始终是 YYYY-MM-DD，但显示格式由系统/浏览器 locale 决定，无法直接改。要强制显示为 MM/DD/YYYY，得用“隐藏真实 input + 自定义显示层”的方案：
示例格式化逻辑：new Date(dateValue).toLocaleDateString('en-US') 可直接输出 8/4/2026；若需补零（08/04/2026），建议用 String.prototype.padStart() 手动拼接。
嵌套表格里放日期控件要注意什么
嵌套本身不违法，但子表格的样式会层层叠加，放大定位问题：
