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 ，我制作了一個自定義鈎子來操作一些事件並保持所有集中。