title: display:table, max-width, text-overflow, overflow not working in IE8
body: <p>For various jQuery/Javascript-related reasons, I'm using divs styled with display:table and display:table-cell to represent data. The markup looks like this:</p>
  
  <pre><code>&lt;div style="display:table; width:100%"&gt;
    &lt;div style="display:table-cell; width:20%;"&gt;Stuff&lt;/div&gt;
    &lt;div style="display:table-cell; width:60%; max-width:600px; overflow: hidden;"&gt;
      Longer Stuff
    &lt;/div&gt;
    &lt;div style="display:table-cell; width:20%;"&gt;Stuff&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The styling is actually in css of course, not a style attribute, but this is the general idea. The site itself is fixed width, hence the pixel #.</p>
  
  <p>This works perfectly in all browsers I've tested in except IE8 (I have not tested in IE9). In IE8 however, the center column seems to be ignoring the overflow and max-width properties. Is this a bug in IE8? If so, is it possible to resolve this without finding a new way to tabulate my data?</p>