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

Question

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

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

Answer 1

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

Что-то вроде этого:

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

Answer 2

CSS должен сделать трюк:

#my_input { 
    width: 100%; 
} 

#my_table { 
    table-layout:fixed; 
} 

Answer 3

, если это работает для вас:

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 4

Настройка ширины поля на 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 5

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

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