title: Padding changes width inside table
body: <p>I have a table that has fixed width, and inside the table I need to have some <code>inputs(text)</code> that has the same width of the table, but I don't want the text of the inputs to be at <code>left:0</code>, I want them to have some padding from the left. But when I put the padding to those inputs the width changes to more than <code>100%</code>.</p>
  
  <p>Here the HTML:</p>
  
  <pre><code>&lt;table cellspacing="25"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" placeholder="lalala"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is the CSS.</p>
  
  <pre><code>table {
      background-color: red;
      width: 300px;
  }
  table input {
      width: 100%;
      padding-left: 10px;
  }
  </code></pre>
  
  <p>How can I ensure that the width of the input element is <code>100%</code> the width of the table cell?</p>
  
  <p><a href="http://jsfiddle.net/3nk07y1x/" rel="noreferrer">Check the fiddle</a></p>