Могу ли я, чтобы входной элемент заполнил ширину столбца таблицы?

Question

Я бы хотел, чтобы элемент input [type = text] всегда имел ту же ширину, что и ячейка таблицы, в которой он содержится. Мне нужно убедиться, что ширина ячейки таблицы не зависит от ширины элемента input ,

Как я могу сделать это с помощью CSS? Нужно ли использовать JS? Если это так, что будет лучшим способом определить, когда размер ячейки таблицы изменился?

Answer 1

, если вам это подходит:

td > input[type='text']
{
    width: 100%; /*this will set the width of the textbox equal to its container td*/
}

попробуйте это:

td > input[type='text']
{
    display:block; /*this will make the text box fill the horizontal space of the its container td*/
}

Answer 2

Установка правил CSS width:100%; и display:block; для элемента INPUT должна сделать это.

На практике этого недостаточно, кажется, некоторые браузеры подчеркивают стиль INPUT size поверх стиля. Так, например, Chrome расширяет элемент в соответствии с размером, расширяя таким образом столбец таблицы. Установка size=0 не работает, так как по умолчанию она имеет какое-то допустимое значение. Однако установка атрибута size=1 в элементе INPUT позволяет добиться желаемого поведения. Однако это не только решение CSS, и INPUT не может быть сжат ниже определенной, но небольшой ширины.

Answer 3

Установка ширины вашего поля на 100% должна работать. В этом случае вы также захотите добавить правило box-sizing, чтобы поле ввода не игнорировало заполнение ячеек таблицы.

td.value input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

См. Пример http://jsfiddle.net/MEARG/

Answer 4

CSS должен добиться цели:

#my_input {
    width: 100%;
}

#my_table {
    table-layout:fixed;
}

Answer 5

А как насчет настройки стиля (или класса) ширина: 100%; для элементов ввода, которые находятся внутри таблицы?

Примерно так:

td input.myclass[type=text]
{
    width: 100%;
}