CODEWITHSUNDEEP
htmlcsshtml-table
Infinity
Infinity

Reputation: 898

How to make full width of rows when have different count of columns

How can I achieve result like in image below via CSS / HTML?

table

As you see first 2 rows have 2 columns, 3-4 rows have 3 columns, 5-6 rows should be full width. Problem is that I can't get different widths for different rows. Should I add class for each td and specify It's width manually? Maybe there is another way? I provided simplified sample, for reality there are over than 150 fields in table.

Here I've created JS FIDDLE too see structure of table. 

<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>
    ....

Upvotes: 1

Views: 2178

Answers (1)

michaPau
michaPau

Reputation: 1648

It's possible with several techniques. Personally I would choose flexbox styling.

With flex: 1 1 auto; for grid-items they grow and shrink like you want.

I've put a quick example for this layout on fiddle

I use there display: flex even for the body but just to center the hole grid.

Update: I updated the fiddle link for a more 'dynamic' layout.

Upvotes: 3

Related Questions