html - 如何实现显示:table div with additional,合并行？

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

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