如何实现display：table div with additional，merged row？

Question

表包含具有一些简单的短数据单元格的行以及必须位于每一行下的宽和长数据单元，描述上述值。此行/单元格必须具有100％的表格宽度。我创建了一个snippet，这可以成为我必须实现的一个例子。我不能创建另一行，因为数据是在一个table-row div中生成的，这也是一个要求。任何想法如何做到这一点？提前致谢！

.table {
  display: table;
  border: 1px solid black;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 100px;
  border: 1px solid black;
}

.more-info {
  // ? What has to be done here to display this div below 
}

<div class="table">
  <div class="row">
    <div class="cell">
      Cell 1
    </div>
    <div class="cell">
      Cell 2
    </div>

    <div class="more-info">
      More info. This row should display BELOW this row.
    </div>
  </div>
  <div class="row">
    <div class="cell">
      Cell 1
    </div>
    <div class="cell">
      Cell 2
    </div>

    <div class="more-info">
      More info. This row should display BELOW this row.
    </div>
  </div>
</div>

Answer 1

Display:flex;可以为您完成工作，display:table; 无法。

＆＃13;

＆＃13;

.table {
  width: 200px; /* because you did set width:100px to cells like containers */
  border: 1px solid black;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.cell {
  flex: 1;
  border: 1px solid black;
}
.more-info {
  width: 100%;
}

＆＃13;

<div class="table">
  <div class="row">
    <div class="cell">
      Cell 1
    </div>
    <div class="cell">
      Cell 2
    </div>

    <div class="more-info">
      More info. This row should display BELOW this row.
    </div>
  </div>
  <div class="row">
    <div class="cell">
      Cell 1
    </div>
    <div class="cell">
      Cell 2
    </div>

    <div class="more-info">
      More info. This row should display BELOW this row.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;