如何实现显示:具有附加合并行的表div

Question

表包含的行具有一些简单的短数据单元格和必须在每行下放置的宽而长的数据单元格，描述了上面的值。此行/单元格必须具有表格宽度的 100%。我创建了一个片段，可以作为我必须实现的示例。不过我无法创建另一行，因为数据是在div 的一个table-row中生成的，这也是一项要求。任何想法如何做到这一点？提前感谢！

.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;不能。

.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%;
}

<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>