Как сделать последний столбец на оставшиюся ширину?

Question

[MaksSmag]

В таблице html таблице есть 2 столбца - в первом одно слово, в втором столбце input типа number. Как расстянуть столбец с input на всю оставшиюся ширину?

P. S. Решение с calc() и фиксированной шириной не приветствуются. Спасибо за понимание.

Answer 1

[approximate solution]

flex-grow: 1

На будущее: код кидайте на codepen, а то все эти изыски дизайнера из paint, годятся только для колледжа дизайнеров имени Артемия Лебедева.

Comments

[MaksSmag]

flex-grow: 1

У меня не flexbox.

а то все эти изыски дизайнера из paint, годятся только для колледжа дизайнеров имени Артемия Лебедева.

Не умничайте, я по быстрому написал. И зачем тут код нужен?? Вы HTML таблиц в жизни не видели?

[MaksSmag]

А если всё же на tr поставить display flex, то это уже не таблица! А без этого свойство тупо не работает.

[approximate solution]

MaksSmag, учите css)

[MaksSmag]

approximate solution, Я учу. Тупики у всех бывают иногда.
Вот прямо сейчас, что учить предлагаете?

[approximate solution]

MaksSmag, Для начала я предлагаю Вам выгрузить ваш код на codepen, что бы не заниматься гаданием по кофейной гуще.

[MaksSmag]

approximate solution, ничего же страшного, что без шрифтов, картинок и фонов?

[approximate solution]

MaksSmag, https://codepen.io/approximate_solution2k20/pen/mdPeQoy
Так вы хотели?

[MaksSmag]

approximate solution, да, спасибо большое!!

[approximate solution]

MaksSmag, Не за что, хорошего дня.

[MaksSmag]

approximate solution, Вам тоже

[MaksSmag]

approximate solution, хотел бы ещё поинтересоваться об одной детали. Почему без поля в 25px input вылезает за границы? Есть ли способ исправить, что бы сам браузер подсчитывал, что то наподобии box-sizing?

[approximate solution]

MaksSmag, Нужно задать padding всему table, которые будет ограничивать контент находящийся внутри. И уже после этого убирать padding у td.

[MaksSmag]

approximate solution, Вы всё таки не правильно мне подсказали. Уже, к сожалению получается не таблица, если изменить размер 1-ого столбца:

Это какое то кастыльное решение? Почему то input вылезает за td, это как то не правильно:

[MaksSmag]

approximate solution, Короче, я разобрался сам и написал ответ. Всё ровно спасибо за уделёное время.

[approximate solution]

MaksSmag, Не за что, учите css, т.к про box-sizing вам ответ был дан ниже.

Answer 2

[Spartak (Web-StyleStudio)]

Указать для input

width: 100%;
box-sizing: border-box;

Comments

[Spartak (Web-StyleStudio)]

И для таблицы сделать
width: 100%;
Если она не на всю ширину

Answer 3

[MaksSmag]

Что бы 2-ой столбец брал всю оставшиюся ширину нужно поставить ему 100% ширины, а второму не ставить. Ещё надо input установить 100% ширины. Плюс обязательно, что бы не input вылазил за границы, нужно прописать box-sizing: border-box.

Comments

[Spartak (Web-StyleStudio)]

Я же вам это и написал сделать

Указать для input

width: 100%;
box-sizing: border-box;

[MaksSmag]

Spartak (Web-StyleStudio), Да, но не полный ответ дали. Всё ровно отмечу решением.