Wie gruppiere ich mehrere Elemente mit Tabellenzeilenanzeige, ohne die Tabelle durcheinander zu bringen?

Question

Ich zeige einige nicht-tabellarische Informationen in einem tabellarischen Layout und versuche, eine Akkordeon-Funktionalität ohne jquery zu erstellen. Was ich versuche zu tun, sollte ähnlich wie folgt aussehen:

// HTML 
<div class="table"> 
    <div class="row header"> 
    <span class="cell">ABCDEFGHIJ</span> 
    <span class="cell">1234567890</span> 
    </div> 
    <div class="content"> 
    <div class="row"> 
     <span class="cell">ABCDEFGHIJ</span> 
     <span class="cell">1234567890</span> 
    </div> 
    <div class="row"> 
     <span class="cell">ABCDEFGHIJ</span> 
     <span class="cell">1234567890</span> 
    </div> 
    </div> 
</div> 

/* CSS */ 
.table { 
    display: table; 
    width: 100%; 
} 

.row { 
    display: table-row; 
    width: 100%; 
} 

.cell { 
    display: table-cell; 
} 

.content { 
    width: 100%; 
} 

Das oben genannte funktioniert jedoch nicht wie vorgesehen. Ich habe versucht, den Inhalt <div> zu verschiedenen Kombinationen von Klassennamen zu ändern, aber die verschachtelten Zeilen erstrecken sich nicht über die gesamte Breite der äußeren Tabelle in beiden Fällen, nur innerhalb der ersten Spalte.

Wenn ich tatsächliche Tabellen verwende, können die oben genannten Probleme mit mehreren <tbody> gelöst werden, um das Akkordeon zu implementieren. Best Practices empfehlen jedoch Kontexte wie meins, keine Tabellen zu verwenden, für die ich online keine relevante Lösung finden kann. Was ist eine äquivalente Lösung für mein Problem?

Answer 1

Verwenden Sie display: table-row-group löst Ihr Problem.

.content { 
    display: table-row-group; 
} 

Beispiel unten. Prost!

.table { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
    width: 100%; 
 
} 
 

 
.cell { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
} 
 

 
.content { 
 
    display: table-row-group; 
 
}

<div class="table"> 
 
    <div class="row header"> 
 
    <span class="cell">ABCDEFGHIJ</span> 
 
    <span class="cell">1234567890</span> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="row"> 
 
     <span class="cell">ABCDEFGHIJ</span> 
 
     <span class="cell">1234567890</span> 
 
    </div> 
 
    <div class="row"> 
 
     <span class="cell">ABCDEFGHIJ</span> 
 
     <span class="cell">1234567890</span> 
 
    </div> 
 
    </div> 
 
</div>