副作用最小的可编辑表格单元格答案

【问题标题】：Editable table cell with the least side effect副作用最小的可编辑表格单元格
【发布时间】：2020-10-26 09:42:39
【问题描述】：

我想让一个表格单元格可编辑，这样看起来和感觉就像您真的在编辑单元格内容，而不是表格单元格中某些元素的内容。

具体来说，我想：

我可以在 TD 元素中放置我想要的任何东西，使用 JavaScript 也可以，但是 HTML 表结构是由我使用的框架提供给我的。

到目前为止，我最好的猜测是将文本区域放入表格单元格中，使其边框不可见并使用CSS Textarea that expands as you type text，但修改其大小计算以以某种方式考虑相邻表格单元格的高度。有没有更简单的方法？

【问题讨论】：

【解决方案1】：

点击狗并编辑。

<table>
  <td contenteditable style="border: 1px solid black; outline: 0px;">dogs</td>
</table>

【讨论】：

谢谢！是的，这行得通。不知何故，我坚持认为我无法更改 TD 元素本身，因为它们是由框架生成的。但是我可以在页面加载后使用 JavaScript 添加 contenteditable 属性。