如何保持表格td原有宽度 切换输入框时不错位且支持响应式

问题复现 #

• 表格<td>默认宽度为auto（未手动指定宽度），点击编辑图标后单元格内普通文本替换为输入框
• 输入框默认宽度特性会打乱表格原有列宽计算规则，导致整体布局错位，效果如下：
  
• 目标效果：无需逐个给td设置固定宽度，切换编辑态时保持原有列宽，同时保留不同屏幕下的响应式适配能力

实现原理 #

浏览器默认的表格布局模式table-layout: auto会根据所有单元格的内容动态计算列宽，输入框作为可替换元素默认有最小内容宽度，比纯文本占位宽，替换后就会触发表格重新列宽计算导致错位。
我们只需要在进入编辑态的瞬间，先把当前自然渲染的列宽锁定，切换到固定表格布局模式让内容不再影响列宽，同时让输入框完全适配单元格宽度即可，退出编辑后释放宽度锁定，恢复原有的响应式自动布局。

完整实现代码 #

1. 基础样式 #

/* 编辑态下表格用固定布局，宽度撑满容器，禁止内容影响列宽 */
table.edit-mode {
  table-layout: fixed;
  width: 100%;
}
/* 单元格内输入框完全适配td宽度，盒模型设为border-box避免padding撑破 */
table td input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

2. 编辑切换逻辑 #

const editToggleBtn = document.querySelector('.edit-toggle');
const targetTable = document.querySelector('.data-table');
let editStatus = false;

editToggleBtn.addEventListener('click', function() {
  if (!editStatus) {
    // 进入编辑态：先锁定当前所有单元格的实际渲染宽度
    const allCells = targetTable.querySelectorAll('th, td');
    allCells.forEach(cell => {
      const currentWidth = cell.getBoundingClientRect().width;
      cell.style.width = currentWidth + 'px';
    });
    // 切换表格为固定布局模式
    targetTable.classList.add('edit-mode');
    // 此处替换单元格内容为输入框，逻辑根据自身业务编写
    renderEditInput();
    editStatus = true;
  } else {
    // 退出编辑态：清除手动设置的宽度，恢复自动布局
    const allCells = targetTable.querySelectorAll('th, td');
    allCells.forEach(cell => {
      cell.style.width = '';
    });
    targetTable.classList.remove('edit-mode');
    // 此处换回普通文本展示，逻辑根据自身业务编写
    renderPlainText();
    editStatus = false;
  }
})

// 可选：窗口尺寸变化时如果处于编辑态，重新计算锁定宽度适配新尺寸
window.addEventListener('resize', () => {
  if (editStatus) {
    // 先清掉原有宽度让表格回到自然布局
    const allCells = targetTable.querySelectorAll('th, td');
    allCells.forEach(cell => {
      cell.style.width = '';
    });
    targetTable.classList.remove('edit-mode');
    // 重绘后重新锁定宽度
    requestAnimationFrame(() => {
      allCells.forEach(cell => {
        const newWidth = cell.getBoundingClientRect().width;
        cell.style.width = newWidth + 'px';
      });
      targetTable.classList.add('edit-mode');
    })
  }
})

方案特点 #

• 无需提前给每个单元格硬编码固定宽度，完全适配页面首次加载的自然列宽
• 非编辑状态下保持默认自动表格布局，窗口尺寸变化时可自动适配，不损失响应式能力
• 代码量小，无额外依赖，兼容所有主流浏览器

内容的提问来源于stack exchange，提问作者Shubham Singhvi