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

Question

这可能是一个奇怪的问题，但是是否可以构建部分可编辑但部分不可编辑的表格单元格？我的意思是，我想使用 JavaScript 通过在 JavaScript 中设置 .contentEditable = true 来使大部分单元格可编辑（已经完成）。但是，我还希望有一部分（最好在右侧）是无法覆盖或编辑的文本。

我在这里要做的是使大部分表格单元格可编辑以放入原始数据，即数字。但是要留下一个单位的停滞部分，以便该单位实际上不会被视为输入（它更像是装饰）。

如果有帮助，我已经绘制了我想象的模型：

到目前为止，我已经尝试在<td> 之后的初始输入之后添加一个<input> 元素，然后设置输入的样式以设置point-events: none。但这看起来不太好，最终在内容可编辑单元格内创建了一个输入表单，这并不是我真正想要的，最终看起来像这样：

我认为它必须使用一些 CSS 覆盖，而不是实际上是 HTML 表格的一部分。无论哪种方式，我该怎么做？

Answer 1

您可以只使用两个span 元素，将其中一个设为contenteditable。示例：

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>

或者，您可以使用after pseudo-selector 添加单位。示例：

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>