Can I have an input element fill the width of a table column?
Solution 1
if this does work for you:
td > input[type='text']
{
width: 100%; /*this will set the width of the textbox equal to its container td*/
}
try this:
td > input[type='text']
{
display:block; /*this will make the text box fill the horizontal space of the its container td*/
}
Solution 2
Setting CSS rules width:100%;
and display:block;
for the INPUT
element should do that.
In practice, that is not enough, it seems some browsers emphasize the INPUT
's size
attibute over the style. So for example, Chrome widens the element to agree with size, thus widening the table column. Setting size=0
doesn't work, as it is defaulted to some valid value then. However, setting size=1
attribute at the INPUT
element achives the desired behaveour. However, this is no CSS-only solution, and the INPUT
cannot be compressed below a certain but small width.
Solution 3
Setting width of your field to 100% should work. In this case you will also want to add box-sizing
rule to avoid the input field from over ignoring table cell paddings.
td.value input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
See example http://jsfiddle.net/MEARG/
Related videos on Youtube
diolemo
Updated on June 04, 2022Comments
-
diolemo over 1 year
I would like an input[type=text] element to always be the same width as the table cell it is contained in. I need to ensure that the width of the table cell is not influenced by the width of the input element.
How can I do this with CSS? Will I need to use JS? If so, what would be the best way to determine when the table cell changed size?