Nested tables using display:table

Question

I want to achieve the effect of nested tables using the display:table, display:table-row, display:table -cell.

The effect is such that nested table has a width equal to first cell of the main table.

See demo:https://jsfiddle.net/bu9mnegr/1/

I remember that in table is attribute colspan and nested table has width of all cells of main table. How can I do it without colspan?

Answer 1

try this: note the "with" should be 100% for each "table-col" to span...

<div class="display-table">
    <div>
        <div>cell</div>
        <div>cell</div>
    </div>
    <div>
        <div style="display:block; width:200%;">
            <div class="display-nested-table">
                <div>
                    <div>nested cell</div>
                    <div>nested cell</div>
                </div>
            </div>
        </div>
    </div>
</div>