How to make an input element with 5px fill an entire <td>?

Question

I have a text input inside a <td> that has a padding of 5px; When setting its width to 100% it comes out of the boundaries of the <td> for 10px. Is there a way to make it fill the entire <td> (i.e. in practice its width should become 100% - 10px) without using JavaScript?

Thanks in advance

Answer 1

Check the width you specified for your column . Probably that might causing the problem.

Answer 2

If you change it to display: block it will expand to fill up the parent's width.

Answer 3

See http://www.w3schools.com/css/css_boxmodel.asp

It doesn't sound as if that will work as the css width is content only and the padding is in addition to.

So if you are specifying the content to 100% and the padding is 5px, then the total is 100% + 5px.

It sounds as if you really don't need the padding in this situation as it is the only element in the td, so I might consider overriding the inherited padding value on the element, at least the left and right such as:

<input type="text" style="width:100%; padding-left:0px; padding-right:0px;"/>

Another approach would be to use a slightly smaller percentage such as 95% or 90%.