Table using CSS Flexbox

Question

I want to create a table using flexbox. The output should be like this:

The code I have tried is:

.row {
  display: flex;
}

.field {
  flex-grow: 1;
}

<div class="row">
   <div class="field">Name</div>
   <div class="field">DOB</div>
   <div class="field">Address</div>
   <div class="field">Telephone Number</div>
   <div class="field">Sex</div>
</div>
<div class="row">
   <div class="field">Peter Parker</div>
   <div class="field">28/02/1991</div>
   <div class="fieldgrow">
      Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
   </div>
   <div class="field">1233</div>
   <div class="field">M</div>
</div>
<div class="row">
   <div class="field">Peter Parker</div>
   <div class="field">28/02/1991</div>
   <div class="fieldgrow">
      Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
   </div>
   <div class="field">1233</div>
   <div class="field">M</div>
</div>

I am a newbie to HTML and CSS. Where am I making a mistake? Can anyone please help?

@AryanBeezadhur yes, the requirement is to do it using flexbox — newbie, Jun 29 '20 at 12:39
Does this answer your question? [Layout a flex box similar to a table?](https://stackoverflow.com/questions/48570109/layout-a-flex-box-similar-to-a-table) — Abhishek Pandey, Jun 29 '20 at 12:41
@AbhishekPandey not really. Is there a way to achieve this without using any width and height? Ps. Width and height are discouraged with flex, right? — newbie, Jun 29 '20 at 12:44

Aryan Beezadhur · Accepted Answer · 2020-06-29T12:57:18.010

You need to change your HTML and CSS slightly. This looks exactly like an HTML table:

.flex {
  display: flex;
}

.row {
  flex: 1;
  border: 1px solid grey;
}

<div class="flex">
  <div class="row">
    Name
  </div>
  <div class="row">
    DOB
  </div>
  <div class="row">
    Address
  </div>
  <div class="row">
    Telephone Number
  </div>
  <div class="row">
    Sex
  </div>
</div>

<div class="flex">
  <div class="row">
    Peter Parker
  </div>
  <div class="row">
    28/02/1991
  </div>
  <div class="row">
    Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
  </div>
  <div class="row">
    1233
  </div>
  <div class="row">
    M
  </div>
</div>

<div class="flex">
  <div class="row">
    Peter Parker
  </div>
  <div class="row">
    28/02/1991
  </div>
  <div class="row">
    Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
  </div>
  <div class="row">
    1233
  </div>
  <div class="row">
    M
  </div>
</div>

Thanks man. With some modification, I was able to make it as per my requirement — newbie, Jun 29 '20 at 13:25

Parasmal Prajapati · Answer 2 · 2020-06-30T05:08:20.677

-1

you can use CSS as for child div

    .row {
        display: flex;
        flex-wrap: nowrap;
        background-color: greenyellow
    }

    .row>div {
        flex-grow: 1;
        background-color: #f1f1f1;
        width: 100px;
        margin: 10px;
        line-height: 75px;
        font-size: 30px;
    }

your table will be generated definatly

edited Jun 30 '20 at 05:08

answered Jun 29 '20 at 12:52

Parasmal Prajapati

224
3
14

1

It does not work. It assigns the same grow to all divs whereas my requirement is that the Address should occupy more space. Please see the attached image in question :) – newbie Jun 29 '20 at 12:56

Table using CSS Flexbox

2 Answers2