title: Different widths being specified on each row of a table
body: <p>Anyone know why each <code>width:xx%</code> on the table cells are not being used?</p>
  
  <p>Looks like the first row may be set correctly, but the sizes in the second row are being ignored.</p>
  
  <p><a href="http://jsfiddle.net/bobbyrne01/4fLL8md0/1/" rel="nofollow noreferrer">http://jsfiddle.net/bobbyrne01/4fLL8md0/1/</a></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td style="width:80%;"&gt;A lot of text on 1 line&lt;/td&gt;
          &lt;td style="width:20%"&gt;Text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td style="width:20%"&gt;
              &lt;label&gt;Directory:&lt;/label&gt;
          &lt;/td&gt;
          &lt;td style="width:80%"&gt;
              &lt;input id="directory" readonly="true" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/2xa6d.png" alt="screenshot"></p>