Can I enter an input element for the width of a table column?

Question

I would like the input element [type = text] to always be the same width as the cell of the table in which it is contained. I need to make sure that the width of the table cell is independent of the width of the input element,

How to do it using CSS? Do I need to use JS? If so, what would be the best way to determine if the table cell size has changed?

Answer 1

if this works for you:

td > input[type='text'] { width: 100%; /*this will set the width of the textbox equal to its container td*/ } 

try the following:

 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 an INPUT element must do this.

In practice, this is not enough, it seems that some browsers emphasize the INPUT size attribute over the style. So, for example, Chrome expands an element to match its size, thereby expanding the column of the table. Setting size=0 does not work, as the default is some valid value. However, setting the attribute size=1 in the INPUT element gives the desired behavior. However, this is not a CSS-only solution, and INPUT cannot be compressed below a certain, but small width.

Answer 3

Setting the field width to 100% should work. In this case, you also need to add a box-sizing rule to avoid the input field due to ignoring the scroll of the table cell.

 td.value input { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

See an example http://jsfiddle.net/MEARG/

Answer 4

How about the width of the installation style (or class): 100%; for input elements that are inside the table?

Something like that:

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

Answer 5

CSS should do the trick:

 #my_input { width: 100%; } #my_table { table-layout:fixed; }