如何让contenteditable元素尊重表格单元格的初始尺寸？

问题场景：
表格包含3个单元格，每个宽度设为33.333%，前两个单元格放置input元素，第三个放置contenteditable的div。input输入文本溢出时会被隐藏，符合预期；但在contenteditable中输入文本时，单元格会被拉伸，无法实现横向滚动效果。

问题原因 #

表格默认的table-layout: auto会让单元格根据内容自动调整宽度，input作为替换元素，自身的盒模型约束会限制它不会撑大单元格；但contenteditable的div是块级元素，即使设置了overflow，表格仍会优先适应内容宽度，导致单元格被撑开。

解决方案 #

给表格添加table-layout: fixed属性，强制表格按照预设的列宽布局，忽略内容的宽度影响。这样单元格宽度会固定为33.333%，contenteditable元素的overflow设置就能正常生效，文本溢出时显示横向滚动条。

修改后的完整代码：

CSS 代码

* {
  box-sizing: border-box;
}

table {
  width: 100%;
  table-layout: fixed; /* 添加该行强制固定列宽 */
}

td {
  width: 33.333333%;
}

input {
  width: 100%;
  height: 32px;
  border: 1px solid #dedede;
}

.contendeditable {
  padding-left: 10px;
  height: 32px;
  border: 1px solid red;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 32px;
}

HTML 代码

<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td>
      <div class="contendeditable" contenteditable="true"></div>
    </td>
  </tr>
</table>

修改后，contenteditable元素输入过长文本时，单元格宽度保持33.333%，文本溢出时会显示横向滚动条，和input的表现一致。

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