列の数が異なる場合、行の全幅を作る方法

Question

CSS/HTMLを使って下の画像のような結果を得るにはどうすればよいですか？

あなたが最初の2行は2列を持って見ての通り、3-4行は5-6行は全幅である必要があり、3列があります。問題は、異なる行に対して異なる幅を得ることができないことです。それぞれの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;となります。望みどおりに伸び縮みします。

私は、私も体にdisplay: flexそこに使用しますが、ちょうど穴のグリッドを中心にfiddle

にこのレイアウトの簡単な例を入れています。

更新： 「ダイナミック」なレイアウトのためにフィドルリンクが更新されました。