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

13,516

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/

Share:
13,516

Related videos on Youtube

diolemo
Author by

diolemo

Updated on June 04, 2022

Comments

  • diolemo
    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?