Infinity Infinity - 6 months ago 38
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?


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

<th>UserID </th>
<th>FirstName </th>
<th>LastName </th>
<th>Picture </th>
<th>Rank </th>
<th>RankApplied </th>
<th>DateApplied </th>
<th>DateAvailability </th>
<th>VesselsType </th>
<th>DOB </th>
<th>POB </th>
<th>Nationality </th>
<th>English </th>


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.