我的表格有 3 个单元格：前两个单元格包含输入，第三个单元格包含我的contenteditable。每个单元格的宽度为33.333%。当我在输入框中输入文本并且文本溢出时，一切都正常 — 文本只是被隐藏，正如输入框所预期的那样。
但是，当我输入时contenteditable，它会拉伸单元格，而不是像输入那样“滚动”文本。
* {
box-sizing: border-box;
}
table {
width: 100%;
}
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;
}<table>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>
<div class="contendeditable" contenteditable="true"></div>
</td>
</tr>
</table>这是 jsfiddle：https://jsfiddle.net/zvm0exdc/14/