Comment faire colspan en situation fixe de mise en page?

Question

J'ai une table faite par un ensemble d'éléments div.

<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> 

Et voici le 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%; } 

Comment puis-je assurer que le div span2 partagera une largeur de 2 cellules?

Answer 1

Ce n'est pas possible, j'ai mis le lien dup dans les commentaires.

Un travail pourrait être autour de la place display: flex, voir violon https://jsfiddle.net/Lddyn573/2/

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