我可以在表格列的宽度上填充输入元素吗？

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.

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

Answer 4

What about setting style (or class) width: 100%; for input elements that are inside a table?

Something like this:

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

Answer 5

CSS should do the trick:

#my_input {
    width: 100%;
}

#my_table {
    table-layout:fixed;
}