Infinity Infinity - 5 days ago 6
CSS Question

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

Answer

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.

Comments