Javascript CSS/HTML表格：如何根据输入元素的文本值自动增长列宽

我有一张关于React的表格（使用AntD）；但这与问题无关

问题是，我希望特定列的单元格呈现文本输入。。。这很好

但是，如果我只在

td

元素中呈现文本，HTML表将根据表中最长的值自动调整列的宽度。。。但是如果我渲染一个

输入

，自动宽度就不起作用了。 我不想固定列宽（使用px或%）；我希望列具有

输入

自动增长，这取决于单元格中的最长值

代码如下：

这是一个屏幕截图：

这是另一个例子：

在第一个例子中；看起来差不多不错。。。 在第二阶段；第一列的空间太大了（第二列完全适合数据或标题）

因此，

td

元素可能理解

input

元素的宽度，并自动固定表中列的宽度？ 或者存在任何解决方法

那么，td元素有可能理解输入元素的宽度并自动固定表中列的宽度

实际上，输入元素不理解其内容的宽度。 表不知道宽度，因为输入不知道宽度

那么，td元素有可能理解输入元素的宽度并自动固定表中列的宽度

实际上，输入元素不理解其内容的宽度。

---

表不知道宽度，因为输入不知道宽度

在检查了可能性之后，在简短的回答中。仅仅使用CSS，我们无法实现类似于此场景的效果

但是，作为一种几乎可以完美工作的解决方法，我读取每个更改并计算字符串的长度，并且不使用

px

或

%

更改样式。。。而不是，我使用

ch

来更改输入的

宽度

另外一个设置是，我将样式放在同一列的所有输入中，最小宽度为
100%

以下是一个例子：

您可以在此处找到完整的示例：

使用
react
，我制作了一个定制的钩子来操作一些事件并保持所有事件的集中。
在检查了可能性之后，在一个简短的回答中。仅仅使用CSS，我们无法实现类似于此场景的效果

但是，作为一种几乎可以完美工作的解决方法，我读取每个更改并计算字符串的长度，并且不使用
px
或
%
更改样式。。。而不是，我使用
ch
来更改输入的
宽度

另外一个设置是，我将样式放在同一列的所有输入中，最小宽度为
100%

以下是一个例子：

您可以在此处找到完整的示例：

使用
react
，我制作了一个自定义钩子来操作一些事件并保持所有事件的集中。
似乎我需要额外的逻辑来评估和更改代码的宽度。谢谢你的参考！似乎我需要额外的逻辑来计算和更改代码的宽度。谢谢你的参考！