title: Input elements inside table cells - not following overflow:hidden property
body: <p>I have a table, a few  elements have input elements inside them. I have set the following properties for the input elements.</p>
  
  <pre><code>table input{
      width:inherit;
      margin:1px;
      overflow:hidden;
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>What am i doing wrong?</p>
  
  <p>Edit:Code Added</p>
  
  <pre><code>    &lt;div&gt;
      &lt;form&gt;
      &lt;table&gt;
      &lt;tr&gt;
          &lt;th class="tinycolumn"&gt;S.no&lt;/th&gt;
          &lt;th&gt;Part Name&lt;/th&gt;
          &lt;th&gt;Part number&lt;/th&gt;
          &lt;th class="tinycolumn"&gt;Qty&lt;/th&gt;
          &lt;th&gt;New/Repair&lt;/th&gt;
          &lt;th&gt;MRP&lt;/th&gt;
          &lt;th&gt;Denting/Fitting&lt;/th&gt;
          &lt;th&gt;Painting&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1.&lt;/td&gt;
          &lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="number" min="0"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;select&gt;&lt;option value="new"&gt;New&lt;/option&gt;&lt;option value="repair"&gt;Repair&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="tel"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="tel"&gt;&lt;/td&gt;    
          &lt;td&gt;&lt;button&gt;Delete&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button&gt;Add&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input type="submit"&gt;
  &lt;/form&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p>Supporting CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>