如何在`row`里面的css3中使用`colspan`

Question

我正在尝试制作2列，其中一列需要有3行。每行都有单独的单元格数。但这对我不起作用。它应该100％宽，但它看起来像inline-table - 如何解决这个问题？

#table {
    display:table;
    width:100%
}


.row {
    display:table-row;
}

.cell {
    display:table-cell;
    border:1px solid grey;
}

.row1 {
   display: table-caption;
}

.cell1 {
    width:30%
}
   

<div id="table">
    <div class="row">
        <div class="cell cell1">30%</div>
        <div class="cell cell2">
            
            <div class="row row1">
                <div class="cell"><h2>90%</h2></div>
                 <div class="cell"><h2>10%</h2></div>
            </div>
            <div class="row row2">
                <div class="cell"><h2>40%</h2></div>
                <div class="cell"><h2>20%</h2></div>
                <div class="cell"><h2>20%</h2></div>
                <div class="cell"><h2>20%</h2></div>
            </div>
            <div class="row row2">
                <div class="cell"><h2>100%</h2></div>
            </div>
            
        </div>
    </div>
</div>