How To Make A Partially Un-editable Table Cell?

This might be kind of a weird question, but is it possible to build table cells that are partially editable, but also partially un-editable? By this I mean, I want to use JavaScrip

Solution 1:

You could just use two span elements, make one of them contenteditable. Example:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

.input {
  display: flex;
  justify-content: space-between
}

span {
  padding: 0.5em;
}

.value {
  flex-grow: 1;
}

<table><thead><tr><th>Heading 1</th><th>Heading 2</th></tr></thead><tbody><tr><td>Entry 1</td><tdclass="input"><spanclass="value"contenteditable="">10</span><spanclass="unit">kg</span></td></tr><tr><td>Entry 1</td><tdclass="input"><spanclass="value"contenteditable="">20</span><spanclass="unit">kg</span></td></tr></tbody></table>

Alternatively, you could use the after pseudo-selector to add the unit. Example:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

.value::after {
  content: " kg";
}

<table><thead><tr><th>Heading 1</th><th>Heading 2</th></tr></thead><tbody><tr><td>Entry 1</td><tdclass="input"><spanclass="value"contenteditable="">10</span></td></tr><tr><td>Entry 1</td><tdclass="input"><spanclass="value"contenteditable="">20</span></td></tr></tbody></table>