使用display时,colspan的模拟是什么:table; 在CSS？

Question

这项任务很奇怪.我必须创建html表但是我不允许使用传统<table>标签.我的表应该是这样的:

这样做很容易,如下所示:

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

但是,正如我所说,我不能用传统的表格标签(table,tr,td,th).这是我目前拥有的JSFIddle.我怎样才能获得与之相同的结果,<td colspan="5"></td> 但只使用div和CSS.

编辑:
*表格单元格在一行中的宽度不能固定,它应该是动态的,应该可以使它们(单元格)的宽度不同(在一行中).
*表格单元格在同一列的不同行中的宽度必须相等.就像传统的桌子一样.只有"colspanned"单元格的宽度必须不同.

Answer 1

编辑

CSS

.table{
        width: 100%;
    }
    .table .row{
        width: 100%;
        height: 25px;
        margin: 0px;
        padding: 0px;
    }
    .table .row .cell{
        width: 150px;
        float: left;
        border: solid 1px #CCC;
        height: 25px;
    }
    .table .clear_float{
        clear: both;
    }
    .table .row .cell.rowspan{
        width: 759px;
        border: solid 1px #CCC;
    }

html

<div class="table">
    <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>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <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>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <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>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
</div>