本文介绍一种纯前端 JavaScript 方案，通过创建隐藏的样式镜像元素测量每列输入框中 value 文本的实际渲染宽度，并自动为同列所有输入框设置统一、紧凑且带安全内边距的宽度，无需硬编码 CSS 或依赖用户交互。
本文介绍一种纯前端 javascript 方案，通过创建隐藏的样式镜像元素测量每列输入框中 `value` 文本的实际渲染宽度，并自动为同列所有输入框设置统一、紧凑且带安全内边距的宽度，无需硬编码 css 或依赖用户交互。
在构建数据库管理类表单（如药品处方信息编辑页）时，常面临一个视觉一致性难题：表格中各列 的初始 value 长度差异很大（例如“KeyID”列可能仅含 4 位数字，而“Name”列可能显示长达 25 字符的药名），但若统一设为固定宽度（如 width: 85%），会导致短内容留白过多、长内容被截断或换行——既影响可读性，也破坏表格对齐。
CSS 原生不支持“按 value 属性长度自适应宽度”，而常见的 contenteditable 或 resize 方案仅响应用户输入，无法解决服务端预填充后首次渲染即需精准适配的需求。本文提供一个轻量、可靠、无依赖的解决方案：基于 DOM 测量 + CSS 自定义属性驱动的列级宽度计算。
核心思路
-
样式克隆：创建一个不可见的 元素，精确复制目标输入框的所有计算样式（字体、字号、字重、padding、letter-spacing 等）；
- 逐列测量：遍历表格中每个文本输入框，将其 value 写入克隆
，读取其 clientWidth，按的 cellIndex 分组记录该列最大宽度； - CSS 变量注入：将各列最大宽度存为 --widthN 自定义属性，并通过 :nth-child(N) 选择器为对应列输入框绑定 width: var(--widthN)；
- 预留安全边距：在最终宽度中自动添加 4px 水平内边距（可通过调整 div.style.padding = '0 4px' 灵活配置）。
实现代码（推荐放入
- 逐列测量：遍历表格中每个文本输入框，将其 value 写入克隆
