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

【问题标题】：CSS / HTML Table: How to autogrowth a column width based on the text value of the input elementCSS / HTML表格：如何根据输入元素的文本值自动增长列宽
【发布时间】：2020-06-05 00:48:38
【问题描述】：

我有一张关于 React 的表格（使用 AntD）；不过这个问题没关系……

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

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

代码如下：

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

这是截图：

这是另一个例子：

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

那么，td 元素有可能理解input 元素的宽度并自动固定表格中列的宽度吗？或者是否有任何解决方法？

【问题讨论】：

标签： javascript html css reactjs antd

【解决方案1】：

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

实际上是输入元素不理解其内容的宽度。表格不知道有多宽，因为输入不知道有多宽。 Check out these answers.

【讨论】：

似乎我需要额外的逻辑来评估和更改代码的宽度。感谢您的参考！

【解决方案2】：

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

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

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

这里是一个例子：

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

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

【讨论】：