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

Question

I have text input inside <td>that has a padding 5px; When you set its width to, 100%it goes beyond the bounds <td>for 10px. Is there a way to make it fill in everything <td>(i.e., in practice, its width should become 100% - 10px) without using JavaScript?

Thanks in advance

Answer 1

I asked this question back in 2010, and as far as I remember, then there was no reasonable solution.

However, thanks to CSS3, two solutions are now available:

Use box-sizing

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

Use calc

width: calc(100% - 10px);

(, width: -moz-calc(100% - 10px);).

Answer 2

, . , .

Answer 3

display: block, , .

Answer 4

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

, , css , .

, 100%, - 5 , 100% + 5 .

, , td, , , , :

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

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