Как сделать полную ширину строк при разном подсчете столбцов

Question

Как добиться результата, как на картинке ниже, с помощью CSS/HTML?

Как вы видите первые 2 строки имеют 2 колонки, 3-4 строки имеют 3 колонки, 5-6 строк должна быть полной ширины. Проблема в том, что я не могу получить разную ширину для разных строк. Должен ли я добавить класс для каждого td и указать его ширину вручную? Может быть, есть другой способ? Я предоставил упрощенную выборку, поскольку реальность в таблице содержит более 150 полей.

Здесь я создал JS FIDDLE также вижу структуру таблицы.

<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

Возможно с несколькими методами. Лично я бы выбрал flexbox стиль.

С flex: 1 1 auto; для элементов сетки они растут и сжимаются, как вы хотите.

Я положил быстрый пример для этой схемы на fiddle

Я использую там display: flex даже для тела, но только для центрирования отверстия сетки.

Обновление: Я обновил ссылку на скрипку для более «динамического» макета.