Таблица CSS / HTML: как автоматически увеличить ширину столбца на основе текстового значения элемента ввода

У меня есть таблица по React (с использованием AntD); но это не вопрос ...

Проблема в том, что я хочу, чтобы ячейки определенного столбца отображали текстовые поля ... что это нормально.

Но если я визуализирую только текст внутри элемента td, таблица HTML автоматически меняет ширину столбца на основе самого длинного значения в таблице ... но если я визуализирую input, автоматическая ширина не работает. Я не хочу исправлять ширину столбца (используя пиксели или%); Мне нужен столбец с автоматическим ростом inputs в зависимости от самого длинного значения в ячейках.

Вот код:

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

Это скриншот:

Пример 1

Это еще один пример:

Пример 2

В первом примере; выглядит почти хорошо ... Во втором; в первом столбце так много места (второй столбец идеально подходит на основе данных или заголовка).

Итак, возможно ли, что элемент td понимает ширину элемента input и автоматически фиксирует ширину столбца в таблице? Или существует какое-то обходное решение?


reactjs javascript html css antd
person MiBol    schedule 05.06.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Итак, возможно, элемент td понимает ширину элемента ввода и автоматически фиксирует ширину столбца в таблице?

На самом деле элемент ввода не понимает ширины своего содержимого. Таблица не знает, насколько широкой должна быть, потому что входные данные не знают, какой ширины она должна быть. Ознакомьтесь с этими ответами.

person georgedum    schedule 05.06.2020
comment
Кажется, мне нужна дополнительная логика для оценки и изменения ширины с помощью кода. Спасибо за ссылку! - person MiBol; 06.06.2020

arrow_upward
1
arrow_downward

После проверки возможностей, краткий ответ. Просто с помощью CSS мы не можем добиться чего-то подобного.

Но в качестве обходного пути, который работает почти идеально, я читаю каждое изменение, беру длину строки и меняю стиль, не используя px или _2 _... вместо этого я использую ch для изменения width ввода.

В качестве дополнительной настройки я помещаю стиль во все поля ввода одного и того же столбца с min-width равным 100%.

Вот пример: Пример

Полный пример вы можете найти здесь: https://codesandbox.io/s/kind-thunder-z9qfb?file=/src/columnsRender.js

Используя react, я создал специальный хук, чтобы управлять некоторыми событиями и сохранять все централизованно.

person MiBol    schedule 05.06.2020