How do I get the 'inline-table' feature to work?

Been trying it many different ways, but it will not work.

I use Mozilla Firefox. 'run-in' gets an error response 'we do not support' but the inline-table does not get that error response so Firefox does accept it. But it just does not seem to work the way I would expect it.


I would expect that 'inline-table' would just mean you get a nice neat field of boxes of an equal size to each other. Or, at least all on a row, would have the same height as all others on its same row, and likewise on the column axis would match others in width.

What is the 'inline-table' meant to do?

I would guess you need to display its inner elements as table-row and table-cell accordingly. For exmaple, the code below would act just like a regular table.

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell;">
            Cell #1
        </div>
        <div style="display: table-cell;">
            Cell #2
        </div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell;">
            Cell #3
        </div>
        <div style="display: table-cell;">
            Cell #4
        </div>
    </div>
</div>

Although it seems pointless to emulate a table with other elements when there already exists such tags; <table>, <tr>, <td>. In my opinion, tables should not be totally taboo as they seem to be today. They still serve a purpose and should be used when appropriate, just not for everything as they often were before.

So, in short, if what you're trying to do is emulate table behaviour, perhaps you should just use a regular table.

Have a read of http://www.vanseodesign.com/css/tables/