title: How can I get inline-block to render consistently when applied to table cells?
body: <p>I have a simple HTML table that I want to render consistently across every modern browser (IE9, latest FF, Chrome, Safari).  If I apply widths and "display: inline-block" to just the table cells, FireFox 4 and Chrome will allow the table cells to 'wrap' into a second row, as if they were just regular inline-block elements.  In IE9, however, the cells are treated like classic table cells, and do not maintain their widths and are scrunched into one row.  </p>
  
  <p>Full example of the code is here: <a href="http://jsbin.com/ujeber/6" rel="nofollow">http://jsbin.com/ujeber/6</a></p>
  
  <p>Is there a CSS property that can be applied to the table, tr, or td elements to get IE9, Chrome and FireFox 4 to behave in the same way as each other?  If not, which of these browsers is following the standards correctly, or are the standards ambiguous in this case?</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;Test1&lt;/td&gt;
      &lt;td&gt;Test2&lt;/td&gt;
      &lt;td&gt;Test3&lt;/td&gt;
      &lt;td&gt;Test4&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>  td {
      width:300px;
      display:inline-block;
    }
  
    table {
      width: 650px;  
    }
  </code></pre>
  
  <p>I know that this isn't the typical/suggested way to use the table element. I am asking in the context of the expected behavior of rendering engines. I'm not looking for answers related to choosing semantically appropriate tags.</p>