html - 使用显示: table; in CSS?时colspan的模拟是什么

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。

编辑:
* 表格单元格在一行中的宽度不能固定，它应该是动态的，并且应该可以使它们(单元格)在一行中具有不同的宽度。
* 表格单元格在同一列的不同行的宽度必须相等。就像在传统的 table 上一样。只有“colspanned”单元格的宽度必须不同。

Answer 1

如 CSS 2.1 规范中 "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 ...

所以答案很简单!不要认为 CSS tables 与 HTML tables 完全一样。由于存在一些差异，如 "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. ...

所以你可以这样做(每行作为一个表并删除表行以避免不必要的 div block )直到他们指定一种定义跨行或跨列数的方法:

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>