如何制作部分不可编辑的表格单元格？

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, ie 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?

Answer 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>