可编辑表格同一行不同td高度不一致的CSS问题如何修复

修复方案 #

问题核心是你覆写了表格原生的布局属性，导致表格失去了默认的单元格等高特性，按以下步骤修改即可：

• 移除错误的display属性：删除table的display: inline-block、td的display: inline-block配置，保留原生表格的布局逻辑，才能让同一行所有单元格自动跟随最高单元格的高度对齐。
• 修正错误的宽度配置：3列表格不需要给td设置width: 100%，配合table-layout: fixed属性，每列宽度会自动均分，也可以手动指定每列宽度。
• 修正写错的对齐属性：tr里的vertical-align: center是无效值，改为vertical-align: middle实现单元格内容垂直居中。
• 修正HTML中col元素的位置：col元素需要放在<tbody>标签外，不能插入到<tr>之间。

修正后的CSS代码

table{ 
  margin:.5em 0;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
  width: 100%; /* 可按需调整表格总宽度 */
} 

table tr{
  height:auto;
  white-space:nowrap;
  overflow:visible;
  vertical-align:middle;
}

table td{ 
  min-height:2em;
  padding:0 .6em;
  overflow:hidden;
  height: 100%;
}

修正后的HTML代码

<table>
  <col/>
  <col/>
  <col/>
  <tbody>
    <tr>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
    </tr>
    <tr>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
    </tr>
    <tr>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
    </tr>
  </tbody>
</table>

如果需要避免回车生成多余块级元素导致高度异常，可以给可编辑单元格添加回车事件监听：

document.querySelectorAll('td[contenteditable]').forEach(td => {
  td.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
      document.execCommand('insertLineBreak')
      e.preventDefault()
    }
  })
})

内容的提问来源于stack exchange，提问作者Mohammadjorayr Tabari