Colspan替代基于<div>的结构

Question

我想使用div元素来创建一个类似于表格的布局.

我想要的是

.tableStyle td {
  background: red;
  color: #fff
}

.contentBox {
  min-height: 200px;
}

<table class="tableStyle" width="100%" cellspacing="10">
  <tr>
    <td width="25%">
      <div class="contentBox">One</div>
    </td>
    <td width="25%">Two</td>
    <td width="50%" colspan="2">Three</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="contentBox">Four</div>
    </td>
    <td colspan="2">Five</td>
  </tr>
</table>

是)我有的

.table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  color: #fff
}

.table .row {
  display: table-row;
}

.table .table-cell {
  display: table-cell;
  background: red;
  width: 50%;
}

.contentBox {
  min-height: 200px;
}

.table .smlCell {
  width: 25%;
}

.table .table {
  border-spacing: 0;
}

<div class="table">
  <div class="row">
    <div class="table-cell">
      <div class="table">
        <div class="row">
          <div class="table-cell smlCell">
            <div class="contentBox">One</div>
          </div>
          <div class="table-cell smlCell">
            Two
          </div>
        </div>
      </div>
    </div>
    <div class="table-cell">Three</div>
  </div>
  <div class="row">
    <div class="table-cell">
      <div class="contentBox">Four</div>
    </div>
    <div class="table-cell">Five</div>
  </div>
</div>

我想在标有"一"和"二"的单元格之间有相等的间距.

我还希望连续的所有单元格都具有相同的高度.

在网上搜索之后,我知道存在一些限制或问题,display: table例如缺少colspan/rowspan等价物,这可能有助于我正在努力实现的目标.

无论如何(除了形式<table>)创建这个？

Answer 1

当然有!

演示小提琴

HTML

<div class='table'>
    <div class='row'>
        <div class='table'>
            <div class='cell'>One</div>
            <div class='cell'>Two</div>
        </div>
        <div class='cell'>Three</div>
    </div>
    <div class='row'>
        <div class='cell'>Four</div>
        <div class='cell'>Five</div>
    </div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.cell {
    display:table-cell;
    width:50%;
}
.row {
    display:table-row;
}
.cell {
    background:red;
    color:white;
    border:5px solid white;    
}