title: <TD> tag ignoring width in CSS
body: <p>I have a table that I have been successfully able to highlight the correct cells with a selector.  However the <code>width</code> tag is being ignored.  Can someone explain why the widths of the cells aren't affected?</p>
  
  <p>Here is the <a href="http://jsfiddle.net/uZfbp/1/" rel="noreferrer">jsfiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Test Title&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Test Title&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="middle"&gt;
  &lt;table border="1" width="100%"&gt;     
      &lt;tr&gt;
          &lt;th&gt;Test Col 1&lt;/th&gt;
          &lt;th&gt;Test Col 2&lt;/th&gt;
          &lt;th&gt;Test Col 3&lt;/th&gt;
          &lt;th&gt;Test Col 4&lt;/th&gt;
          &lt;th&gt;Test Col 5&lt;/th&gt;
          &lt;th&gt;Test Col 6&lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td&gt;Col 1&lt;/td&gt;
          &lt;td&gt;Col 2&lt;/td&gt;
          &lt;td&gt;Col 3&lt;/td&gt;
          &lt;td&gt;Col 4&lt;/td&gt;
          &lt;td&gt;Col 5&lt;/td&gt;
          &lt;td&gt;Col 6&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td&gt;Col 1&lt;/td&gt;
          &lt;td&gt;Col 2&lt;/td&gt;
          &lt;td&gt;Col 3&lt;/td&gt;
          &lt;td&gt;Col 4&lt;/td&gt;
          &lt;td&gt;Col 5&lt;/td&gt;
          &lt;td&gt;Col 6&lt;/td&gt;
       &lt;/tr&gt;
       &lt;/table&gt;
  &lt;/div&gt;
  &lt;table border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;LINKS&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;LINK 1  | LINK 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;LINK 1  | LINK 2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table { float:left; }
  .middle {  float:left; width:350px; overflow:auto;}
  .middle table td, .middle table th { width:300px; background:red; }
  </code></pre>