What is the analog of colspan when use display: table; in CSS?

Question

The task is pretty strange. I have to create html table BUT I'm not allowed to use traditional <table> tag. My table should look like this:

It would be easy to do it like below:

<table>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
         <td colspan="5"></td>
     </tr>
     ...

but, as I said, I'm not allowed to use traditional table tags (table, tr, td, th). Here is JSFIddle of what I have at the moment. How can I get the same result as with <td colspan="5"></td> but using only divs and CSS.

EDITS:
* Table cell's width in one row must not be fixed, it should be dynamic and it should be possible to make them (cells) different width (in one row).
* Table cell's width in different rows of the same column must be equal. Like in traditional table. Only "colspanned" cell's width must be different.

Answer 1

As stated in CSS 2.1 specification in part "17.5 Visual layout of table contents"

Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined ...

So the answer is easy! Don't think of CSS tables exactly the same as HTML tables. As there are some differences like what mentioned in "17.2.1 Anonymous table objects":

... the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. ...

So you can do it this way (each row as a table and dropped table-row for avoiding unnecessary div block) until they specify a way for defining number of spanned rows or columns:

CSS

.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
    width: 16.67%;
}
.wideCell {
    display: table-cell;
}

HTML

<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>