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

Question

我有一张关于 React 的表格（使用 AntD）； 但这个问题并不重要......

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

但是，如果我仅在td元素内呈现文本，则 HTML 表会根据表中最长的值自动调整列的宽度......但如果我呈现input ，则自动宽度不起作用。 我不想修复列宽（使用 px 或 %）； 我希望inputs自动增长的列取决于单元格中的最长值。

这是代码：

https://codesandbox.io/s/keen-browser-v54fh?file=/src/columnsRender.js

这是一个截图：

这是另一个例子：

在第一个例子中； 看起来几乎不错......在第二个; 第一列的空间太大了（第二列非常适合基于数据或标题）。

那么，有可能一个td元素理解了input元素的宽度，并自动修复了表格中列的宽度吗？ 或者存在任何解决方法？

Answer 1

那么，有可能一个 td 元素理解了输入元素的宽度，并自动修复了表格中列的宽度吗？

实际上是输入元素不理解其内容的宽度。 表格不知道有多宽，因为输入不知道有多宽。 看看这些答案。

Answer 2

在检查了可能性之后，在一个简短的答案中。 仅使用 CSS 我们无法实现这种情况。

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

另一个设置，我将样式放在同一列的所有输入中， min-width为100% 。

这是一个例子：

您可以在这里找到完整的示例： https://codesandbox.io/s/kind-thunder-z9qfb?file=/src/columnsRender.js

使用react ，我制作了一个自定义钩子来操作一些事件并保持所有集中。