.mainTable{ display:table; width:100%; border-collapse:collapse; } .topRow{ display:table-row; background-color:fuchsia;
border-spacing:5px;
} .bottomRow{ display:table-row; background-color:#F2F2F2;
border-spacing:5px;
}
.cell1, .cell2, .cell3, .cell4, .cell5, .cell6{ display:table-cell;
padding:10px;
}
-->
<div class="topRow">
<div class="cell1"><div style="width:50px;height:50px; background-color:white; float:left;">1</div>
</div>
<div class="cell2"><div style="width:50px;height:50px; background-color:white; float:left;">2</div>
</div>
</div>
<div class="bottomRow">
<div class="cell3"><div style="width:50px;height:50px; background-color:white; float:left;">3</div>
</div>
<div class="cell4"><div style="width:50px;height:50px; background-color:white; float:left;">4</div>
</div>
<div class="cell5"><div style="width:50px;height:50px; background-color:white; float:left;">5</div>
</div>
<div class="cell6"><div style="width:50px;height:50px; background-color:white; float:left;">6</div>
</div>
</div>
<!--</div>-->
I have the above scenario. I am not using table tags because in share point page layouts table tags don't go well. so I am using div as display:table. With the above style and html I am getting the result shown in the pink boxes image. But now I want to expand the cell 1 till cell 5 as shown in reb boxed image below the pink boxed image. Please help. Thanks a million.