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

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.

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.

No, there isn't any CSS properties, to wrap the cells._{P.s. AFAIK}