How to make an input element with 5px padding 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

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);).