Minha tabela tem 3 células: as duas primeiras contêm entradas, e a terceira tem meu contenteditable. Cada célula tem uma largura de 33.333%. Quando eu digito texto em uma entrada e ela transborda, tudo funciona bem — o texto é simplesmente escondido, como esperado para uma entrada.
No entanto, quando digito contenteditable, ele estica a célula em vez de "rolar" o texto como uma entrada faz.
* {
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>Aqui está o jsfiddle: https://jsfiddle.net/zvm0exdc/14/