Does anyone know why the input elements with a width of 100% go over the table's cells border.
In the simple example below input box go over the table's cells border, the result is horrible. This was tested and it happens in the same way on: FF, IE7 and Safari.
Does it make sense for you?
Am I missing something, do you know about a possible solution?

I would suggest that, if you're just using a table for presenting the inputs, you might switch to using a form with the label s and input s inside a ul or ol. which is, at least slightly more semantic. Certainly though, you should be using a form, even if you do stick with the table.
–
David ThomasMar 3 '10 at 16:38

further to Sr pts answer you could set the padding and border to 0px then the 100% should work.
–
MauroMar 3 '10 at 16:37

Indeed, even without setting any padding for td - very well added.
–
ANevesMar 3 '10 at 16:41

1

Also, if the padding creates an issue, it's possible to use text-indent to simulate padding ahead of the leading-edge of the text, and line-height for vertical padding (though retaining vertical padding wouldn't affect the width anyway).
–
David ThomasMar 3 '10 at 16:58

The trick is to wrap the input with two divs, the outer has a 3px margin (which makes it 3px smaller than the td), the inner has a 3px padding. This makes the input 6px smaller than the td, which is what you wanted to begin with.

I am not sure about the mechanics of this, but it works.

In this simple example, it also works with just a single div with right margin 6. However, in the case of my web application, only the above solution works.

The problem has been explained previously so I will only reiterate: width doesn't take into account border and padding. One possible answer to this not discussed but which I have found helped me out a bunch is to wrap your inputs. Here's the code, and I'll explain how this helps in a second:

The DIV wrapping the INPUT has no padding nor does it have a border. This is the solution. A DIV will expand to its container's size, but it will also respect border and padding. Now, the INPUT will have no issue expanding to the size of its container since it is border-less and pad-less. Also note that the DIV has its overflow set to hidden. It seems that by default items can fall outside of their container with the default overflow of visible. This just ensures that the input stays inside its container and doesn't attempt to poke through.

I've tested this in Chrome and in Fire Fox. Both seem to respect this solution well.

UPDATE: Since I just got a random downvote, I would like to say that a better way to deal with overflow is with the CSS3 box-sizing attribute as described by pricco:

This seems to be pretty well supported by the major browsers and isn't "hacky" like the overflow trick. There are, however, some minor issues on current browsers with this approach (see http://caniuse.com/#search=box-sizing Known Issues).

A short note: with overflow: hidden; the content still 'pokes through' to the outside of the box in exactly the same way, but it is truncated instead of being shown - so it doesn't overlap other content.
–
ANevesJan 25 '12 at 16:10

Do you mean using http://www.w3.org/TR/html4/strict.dtd Strict? ref. w3.org/QA/2002/04/valid-dtd-list.html Anyway this is not an option cause changing the DOCTYPE now would probably impact the rendering of many other stuf in webpages.
–
Marco DemaioJul 25 '11 at 18:09

1) If you have your inputs contained in another element such as a SPAN then you will need loop up and find the TD because elements like SPANs will wrap the input and show its size rather then being limited to the size of the TD.

2) If you have padding or margins added at different levels then you might have to explicitly subtract that from [pEl.offsetWidth]. Depending on your HTML structure that can be calculated.

3) If the table columns are sized dynamically then changing the size of one element will cause the table to reflow in some browsers and you might get a stepped effect as you sequentially "fix" the input sizes. The solution is to assign specific widths to the column either as percentages or pixels OR collect the new widths and set them after. See the code below..