Input elements inside table cells - not following overflow:hidden property - css

Question

I have a table, a few elements have input elements inside them. I have set the following properties for the input elements.
table input{
width:inherit;
margin:1px;
overflow:hidden;
}
Now i want the cell size to determine the input element size, hence the inherit property. But because i have a margin set on them, they were popping out of the cells a little. So i added the overflow:hidden property, but thats not helping.
What am i doing wrong?
Edit:Code Added
<div>
<form>
<table>
<tr>
<th class="tinycolumn">S.no</th>
<th>Part Name</th>
<th>Part number</th>
<th class="tinycolumn">Qty</th>
<th>New/Repair</th>
<th>MRP</th>
<th>Denting/Fitting</th>
<th>Painting</th>
<th></th>
</tr>
<tr>
<td>1.</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="number" min="0"></td>
<td><select><option value="new">New</option><option value="repair">Repair</option></select></td>
<td><input type="text"></td>
<td><input type="tel"></td>
<td><input type="tel"></td>
<td><button>Delete</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><button>Add</button></td>
</tr>
</table>
<input type="submit">
</form>
</div>
Supporting CSS
#estimatetable{
display:inline-block;
width:80%;
margin:1em auto 1em auto;
overflow:hidden;
}
#estimatetable form{
width:auto;
}
#estimatetable form table{
text-align:center;
width:100%;
}
#estimatetable tr{
min-height:3em;
}
#estimatetable form table tr td, #estimatetable form table tr th{
border:1px solid rgb(0,0,0);
max-width:2em;
padding:1px;
}
#estimatetable input, #estimatetable select{
width:inherit;
margin:1px;
overflow:hidden;
}
#estimatetable button{
width:100%;
}
#estimatetable .tinycolumn{
max-width:.5em;
}

Answer 1

Your CSS says : input inherits width of parent.
In regular box model, borders are added to width.
Using box-sizing:border-box; , border and padding will be included in total width of element.
Your CSS can be fixed this way :
table input{
width:inherit;
box-sizing:border-box; /* add vendor prefix or a script to do so if needed */
}
If you still wish to use the margin:1px; you should turn it into padding:1px; to parent element (td) and apply to it as well the box-sizing propertie.
DEMO