CSS Display:table-cell With Div Inside Table

How to make display:table-cell style works (or look-alike alternative) if divs with style table-row are inside table cells? (see the link) http://jsfiddle.net/ELKQg/460/ I'd like t

Solution 1:

1. The extra <table> containing your <div>s in .container1 needs to have width: 100%
2. display: table-cell elements don't necessarily need a containing display: table-row as long as the parent is display: table. Set the .row to that (ideally you'd re-name it, seeing as the rule no longer makes sense)

Fixed and forked your demo: http://jsfiddle.net/barney/ahMg8/

Solution 2:

Use display: table for the parent table before using display:table-cell

Solution 3:

Use td's instead of divs inside tr:

<div id="container1" class="container">
    <table>
        <tr>
            <td class="cell">aaaa</td>
            <td class="cell expand">b</td>
            <td class="cell">c</td>
        </tr>
        <tr>
            <td class="cell">d</div>
            <td class="cell expand">eeeee</td>
            <td class="cell">f</td>
        </tr>
    </table>
</div>

Working fiddle