Editable table 副作用最小的细胞
Editable table cell with the least side effect
我想制作一个 table 单元格 editable,这样看起来和感觉就像你真的在编辑单元格内容,而不是 [=32] 中某些元素的内容=] 细胞.
具体来说,我想:
- 看不到 table 单元格元素以外的元素的任何视觉效果
- 能够单击单元格内的任意位置并开始键入文本(无论 editable 单元格可能由 table 中的其他单元格制作多高或多宽)
- 不必指定任何绝对高度或宽度
- 让正在编辑的文本对 table 行和列维度的贡献与非 editable 单元格的内容相同
我可以在 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>
我想制作一个 table 单元格 editable,这样看起来和感觉就像你真的在编辑单元格内容,而不是 [=32] 中某些元素的内容=] 细胞.
具体来说,我想:
- 看不到 table 单元格元素以外的元素的任何视觉效果
- 能够单击单元格内的任意位置并开始键入文本(无论 editable 单元格可能由 table 中的其他单元格制作多高或多宽)
- 不必指定任何绝对高度或宽度
- 让正在编辑的文本对 table 行和列维度的贡献与非 editable 单元格的内容相同
我可以在 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>