如何顯示錶行表現得像合併單元格= 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>