html - Padding changes width inside table -

i have table has fixed width, , inside table need have inputs(text) has same width of table, don't want text of inputs @ left:0, want them have padding left. when put padding inputs width changes more 100%.

here html:

<table cellspacing="25">     <tr>         <td><input type="text" placeholder="lalala"></td>     </tr> </table> 

and css.

table {     background-color: red;     width: 300px; } table input {     width: 100%;     padding-left: 10px; } 

how can ensure width of input element 100% width of table cell?

check fiddle

add css rule input:

box-sizing: border-box; 

the box-sizing property used tell browser sizing properties (width , height) should include.

should include border-box? or content-box.

here snippet:

table {      background-color: red;      width: 300px;  }  table input {      width: 100%;      padding-left: 10px;      box-sizing: border-box;  }

<table cellspacing="25">      <tr>          <td><input type="text" placeholder="lalala"></td>      </tr>  </table>