Editable table 副作用最小的细胞

Editable table cell with the least side effect

我想制作一个 table 单元格 editable,这样看起来和感觉就像你真的在编辑单元格内容,而不是 [=32] 中某些元素的内容=] 细胞.

具体来说,我想:

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

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

点击狗并编辑。

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