如果列数不同，如何制作行的全宽

Question

如何通过CSS / HTML获得如下图所示的结果？

如前所示，前两行有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，但只是将孔网格居中。

<强>更新： 我更新了小提琴链接，以获得更多动态的信息。布局。