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>
      <td class="input"><span class="value" contenteditable="">10</span><span class="unit">kg</span></td>
    </tr>
    <tr>
      <td>Entry 1</td>
      <td class="input"><span class="value" contenteditable="">20</span><span class="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>
      <td class="input"><span class="value" contenteditable="">10</span></td>
    </tr>
    <tr>
      <td>Entry 1</td>
      <td class="input"><span class="value" contenteditable="">20</span></td>
    </tr>
  </tbody>
</table>