title: Why doesn't max-width work on <table>s in IE7?
body: <p>Why does "max-width" not work on tables in Internet Explorer 7? <code>max-width</code> is available on other elements, and seems to work fine, but when applies to a table, I can't make it do anything, i.e. the <code>max-width</code> rule is simply ignored.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Foo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="background-color: Red; max-width: 1000px;"&gt;
          &lt;table style="background-color: Green; max-width: 500px;"&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;&lt;a href="#" class="action view"&gt;View&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;7/20/2011&lt;/td&gt;
                      &lt;td&gt;James Smith&lt;/td&gt;
                      &lt;td&gt;345 NW 23rd Ave Gainesville, FL 32606&lt;/td&gt;
                      &lt;td&gt;Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk&lt;/td&gt;
                      &lt;td&gt;345621&lt;/td&gt;
                      &lt;td&gt;Fred Smith&lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In Firefox, the table is properly constrained to 500px, and the text inside the cells breaks in appropriate ways (between words, just like you'd expect). In IE7 however, it's like the "no-wrap" rule has been applied. Each cell stretches out to its needed with, without trying to break text withing the cell, and the whole table simply stretches out to ignore the <code>max-width</code> rule.</p>
  
  <p>How do I put <code>max-width</code> on a table in IE7? (It works fine in Firefox &amp; IE8)</p>
  
  <p><strong>What I've tried that doesn't work:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>table { display: block; }
  
  td { word-wrap: break-word; }
  
  table { table-layout: fixed; }
  </code></pre>