How to do colspan in table-layout fixed situation?

Question

I have a table made by a set of div elements.

<div class="table-wrapper">
    <div class="table-row">
        <div class="table-cell">&nbsp;</div>
        <div class="table-cell">&nbsp;</div>
        <div class="table-cell">&nbsp;</div>
    </div>
    <div class="table-row">
        <div class="table-cell">&nbsp;</div>
        <div class="table-cell span2">&nbsp;</div>
    </div>
</div>

And here's the css

.table-wrapper { display: table; table-layout: fixed; width: 100%;}
.table-row { display: table-row; }
.table-cell { display: table-cell; width: 33%; }
.table-cell.span2 { width: 66%; }

How can I make sure the span2 div will share 2-cell width?

Answer 1

It is not possible, I put the dup link in the comments.

A work around could be display: flex instead, see fiddle https://jsfiddle.net/Lddyn573/2/

.table-row { display: flex;}
.table-cell {width: 33%; }
.span2 { width: 66%;}