Wie kann wie die <code>td colspan=3</code> table-row verhalten sich wie colspan = 3

Question

Ich brauche zwei Reihen, die erste haben 3 Spalten und die zweite würde ich

Oder Display

tun nur die ganze Breite überspannen müssen angezeigt werden: Tabellen- Zelle; verhalten sich wie colspan = 3

ich verwende display: table-row; width: 100%;

Wie kann es geschehen?

Das ist mein CSS ist:

<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

Mit display: table;it cannot be done (Ursache leider gibt es keine colspan: 3; oder rowspan Eigenschaft in CSS, daher Sheet ist nicht in der Lage ein echtes <table> Element mimick)

aber hey, flex zur Rettung!

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