So erstellen Sie die volle Breite von Zeilen, wenn die Anzahl der Spalten unterschiedlich ist

Question

Wie kann ich das Ergebnis wie im Bild unten über CSS/HTML erreichen?

Wie Sie zuerst sehen, 2 Reihen mit 2 Spalten, 3-4 Zeilen 3 Spalten, 5-6 Zeilen sollten in voller Breite sein. Problem ist, dass ich unterschiedliche Breiten für verschiedene Reihen nicht erhalten kann. Sollte ich für jeden td eine Klasse hinzufügen und die Breite manuell angeben? Vielleicht gibt es einen anderen Weg? Ich habe vereinfachte Probe zur Verfügung gestellt, für die Wirklichkeit gibt es mehr als 150 Felder in der Tabelle.

Hier habe ich erstellt JS FIDDLE zu sehen Struktur der Tabelle.

<table class="tbl"> 

<tr> 
     <th>UserID </th> 
     <th>FirstName </th>    
     <th>LastName </th>   
     <th>Picture </th> 
    </tr> 
    <tr> 
     <td>UserID</td> 
     <td>FirstName</td>   
     <td>LastName</td>   
     <td>Picture</td>     
    </tr> 
    <tr> 
     <th>Rank </th>    
     <th>RankApplied </th> 
     <th>DateApplied </th> 
     <th>DateAvailability </th> 
     <th>VesselsType </th> 
    </tr> 
    <tr> 
     <td>Rank</td>    
     <td>RankApplied</td> 
     <td>DateAvailability</td> 
     <td>VesselsType</td> 
    </tr> 
    <tr> 
     <th>DOB </th>    
     <th>POB </th>    
     <th>Nationality </th>  
     <th>English </th> 
    </tr> 
    <tr> 
     <td>DOB</td>     
     <td>POB</td>     
     <td>Nationality</td>   
     <td>English</td> 
    </tr> 
    .... 

Answer 1

Es ist mit mehreren Techniken möglich. Persönlich würde ich flexbox Styling wählen.

Mit flex: 1 1 auto; für Grid-Artikel wachsen und schrumpfen sie wie Sie wollen.

Ich habe auf fiddle

ich display: flex auch für den Körper verwenden ein kurzes Beispiel für dieses Layout setzen, aber nur das Lochraster zu zentrieren.

Update: Ich aktualisierte die Fiddle-Link für eine "dynamische" Layout.