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

Question

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.

Solution 1

I can't find a way to make IE9 give your desired result with display: inline-block.

Unless your actual use case is somehow different than your simplified test case, you should just be able to switch to float: left on td, which does work:

http://jsbin.com/ujeber/7

floats and inline-block are often interchangeable. But, they both have different strengths and weaknesses. With floats, you have to clear/contain them. With inline-block, you have to deal with extra gaps (commonly fixed by removing whitespace in HTML), and it doesn't work in IE6/7 without further tricks.

Solution 2

You seem to be missing the point of using the <table> element, which is to present data in a tabular form. Tables don't wrap.

If you want your cells to wrap, use a regular block-level tag with inline-block.

---

If we're talking about adherence to the specs, IE9 is the 'least correct' given that the presentation is supposed to be driven by CSS. How would you get IE to do it properly? Setting display: block on your tr and table elements might work.

Comments

[Nathan Bell]

I do understand that, and 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 the rendering engine, not looking for pointers on the semantically proper way to layout a page.

[Nathan Bell]

Thanks thirtydot, this actually does work in IE9, great work! However, it's made me realize that neither my original example, or your float trick, work in Chrome. I've had to revise my original question to reflect that. So now we have three different behaviors across modern browsers... curious.

[thirtydot]

I've tested this jsbin.com/ujeber/8 (which is my answer but with a border on the tds) to work in (all Windows 7): IE9, IE8, Chrome stable latest, Chrome dev latest, Firefox 5, Safari 5, Opera 11. Your original example also works in Chrome.

[Nathan Bell]

Interesting, you're right it works in Chrome (when in jsbin Render mode), but not from edit mode (Real-time preview checked). jsbin.com/ujeber/6/edit doesn't work. jsbin.com/ujeber/6 does. Must be something specific to jsbin.com

[Nathan Bell]

I see now that I needed to give a better example, because while float works when the cells are the same height, it doesn't produce the same affect as inline-block when the cells are of different heights. Meta: I wonder if I should re-ask the question with a more robust example, or edit my existing question.

[Joe Dargie]

@Nathan: re-ask the question with a more robust example, I reckon.