How can I get inline-block to render consistently when applied to table cells?

Nathan Bell

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.

Full example of the code is here: http://jsbin.com/ujeber/6

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?

Markup:

<table>
  <tr>
    <td>Test1</td>
    <td>Test2</td>
    <td>Test3</td>
    <td>Test4</td>
  </tr>
</table>

Style:

  td {
    width:300px;
    display:inline-block;
  }

  table {
    width: 650px;  
  }

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.