title: table not resizing to input
body: <p>Why does the table cell not resize to a smaller input field?</p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;td&gt;
              &lt;input&gt;&lt;/input&gt;
          &lt;/td&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have the following css:</p>
  
  <pre><code>input {
      width: 50%;
      max-width: 50%;
  }
  
  td {
      border: 2px;
      border-color: black;
      border-style: solid;
  }
  </code></pre>
  
  <p>However the border shows that the parent(in this case the <em>td</em> element) takes the original size of the <em>input</em> element after the width is set in the css. Here is a <a href="http://jsfiddle.net/ryangates/7WEKT/3/" rel="nofollow">jsfiddle</a> of this demonstrated.</p>