如何显示表格行像colspan = 3

Question

我需要两行，第一行有3列，第二行我需要跨越所有宽度，就像td colspan=3一样

或显示：table-cell;表现得像colspan = 3

我正在使用display: table-row; width: 100%;

怎么做？

这是我的CSS：

<style>
      .boxer {
         display: table;
         border-collapse: collapse;
      }
      .boxer .box-row {
         display: table-row;
      }
      .boxer .box-row-search {
         display: table-row;
         width: 100%;
      }
      .boxer .box {
         display: table-cell;
         text-align: left;
         vertical-align: top;
         border: 1px solid black;
      }
</style>

Answer 1

使用display: table; it cannot be done（遗憾的是，CSS中没有colspan: 3;或rowspan属性，因此样式表无法模仿真实<table>元素）

但是嘿，flex救援！

＆＃13;

＆＃13;

.row{
  display: flex;
  flex-flow: wrap;
}
.cell{
  width: 25%;
  background:#eee;
}
.colspan2{
  flex: 2;
}

＆＃13;

<div class="row">
  <div class="cell">Cell1</div>
  <div class="cell">Cell2</div>
  <div class="cell">Cell3</div>
  <div class="cell">Cell4</div>
  <div class="cell">Cell5</div>
  <div class="cell colspan2">Cell6 Colspan2</div>
  <div class="cell">Cell7</div>
</div>

＆＃13;

＆＃13;

＆＃13;