如何显示表行表现得像合并单元格= 3

Question

我需要两排，第一个有3列第二，我需要跨越所有的宽度就像td colspan=3会做

或显示：表 - 细胞;表现得像合并单元格= 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（原因可悲的是有没有colspan: 3;或rowspan财产在CSS中，因此样式表是无法模拟天生一个真正<table>元素）

但嘿， flex来救援！

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

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