Can I have an input element fill the width of a table column?

Question

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?

Answer 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*/
}

Answer 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.