How to make a partially un-editable table cell?

Question

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 JavaScript to make a majority of the cell editable by setting .contentEditable = true in JavaScript (already done). However, I also want a portion (preferably on the right side) to be text that cannot be written over or edited.

What I'm trying to do here is make most of the table cell editable to put in raw data, i.e. numbers. But to leave an stagnate section with a unit, so that the unit doesn't actually get taken as input (it's more just like decoration).

I've drawn a mock-up of what I'm imagining, if this helps:

So far, I've tried adding a <input> element after the initial input following <td>, then style the input to set point-events: none. But this does not look good and ends up creating an input form inside of a content editable cell, which isn't really what I want, and ends up looking like this:

I think it would have to use some CSS overlay and not actually be apart of the table HTML. Either way, how would I go about this?

domsson · Accepted Answer · 2020-06-03T08:51:35.163

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>

This is great! Is there a way to expand the area of the contentEditable section, especially in the first one? — ttoshiro, Jun 03 '20 at 00:09
@ttoshiro some `padding` might do the trick. Otherwise, try `flex-grow: 1`. Or use both. I'll add it to the answer (first code snippet). — domsson, Jun 03 '20 at 08:48

How to make a partially un-editable table cell?

1 Answers1

Linked