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

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) w开发者_Go百科ithout using JavaScript?

Thanks in advance

I had asked this question back in 2010 and as far as I can remember there wasn't a reasonable solution available back then.

However thanks to CSS3, two solutions are now available:

Use box-sizing

box-sizing: border-box;
width: 100%;

Use calc

width: calc(100% - 10px);

Some browsers might need vendor prefixing (e.g. width: -moz-calc(100% - 10px);).

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

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

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%.

The answers above did not work for me, the code below worked:

<td style="position:relative;padding:0px;">
  <input style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;width:100%;outline:none;border:0px;" value="" />
</td>