Wie kann der Inhalt bearbeitbar gemacht werden, wobei die ursprüngliche Größe einer Tabellenzelle berücksichtigt wird? ⇐ CSS

[Guest]

Meine Tabelle hat 3 Zellen: Die ersten beiden enthalten Eingaben und die dritte enthält meine bearbeitbaren Inhalte. Jede Zelle hat eine Breite von 33,333 %. Wenn ich Text in eine Eingabe eingebe und dieser überläuft, funktioniert alles einwandfrei – der Text wird einfach ausgeblendet, wie es für eine Eingabe erwartet wird.
Allerdings, wenn ich in den contenteditable eingebe , es streckt die Zelle, anstatt den Text zu „scrollen“, wie es bei einer Eingabe der Fall ist.
[img]https://i.sstatic.net /CbLUjhir.png[/img]

Mein HTML:

Code: Select all

Document

Mein CSS:

Code: Select all

* {
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;
}

Hier ist die jsfiddle: https://jsfiddle.net/zvm0exdc/14/