'Layout a flex box similar to a table?

I'm working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with its own classes and data attributes.

So here's the problem. Without drastically changing the DOM, how can I make the flex box below render essentially like an HTML table would? Or is a table the only way? The solution will have to work in both IE11 and Chrome.

I'm trying to make it look like this...

Column A      |      Column B      |      Column C
1             |      2             |      3


section {
  display: flex;
  flex-wrap: wrap;
}

section .col {
  flex: 1 1 auto;
}

section .line-break {
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}
<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="line-break"></div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>
htmlcssflexbox


Solution 1:[1]

header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}
<section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>

Solution 2:[2]

This code works for me:

        * {
            box-sizing: border-box;
        }


        body, html {
            height: 100%;
            margin: 0;
        }


        #container {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: lightgrey;
            padding: 10px;

        }


        .shelf {

            flex: 1 1 auto;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid black;
            background-color: lightgreen;

            display: flex;
            flex-direction: row;

        }
        .shelf:last-child {
            margin-bottom: 0;
        }


        .labelbox {
            flex: 0 0 35%;
        }


        .valuebox {
            flex: 0 0 65%;
        }
<div id="container">

    <div class="shelf">
        <div class="labelbox">Name: </div> <div class="valuebox">Barry Carter</div>
    </div>

    <div class="shelf">
        <div class="labelbox">DOB:</div><div class="valuebox">10/12/1980</div>
    </div>

    <div class="shelf">

        <div class="labelbox">
            Description:
        </div>

        <div class="valuebox">

            This content goes on and on and will force the height to expand. And the label box to the left will
            "move" with it. There need not be much of a relation other than that their parent div/flex-container is
            getting taller as well.

        </div>

    </div>

    <div class="shelf">
        <div class="labelbox">Group:</div><div class="valuebox">Advanced</div>
    </div>

    <div class="shelf">
        <div class="labelbox">End Date:</div><div class="valuebox">2020-09-20</div>
    </div>

</div>

Solution 3:[3]

Use CSS Grid. You can style any table the way you like.

Keep in mind If your table is more than 700 rows, the fram rate will start to drop, no matter what js framework you use. react, angular, vue or vanila JS. the scrolling will get real laggy.

And the maximum you row can use is 1000. More than that the extra row will create bad graphic. But you wont reach 1000 anyway, because at 700th row, the scrolling speed, starts to get bad.

If somehow you need to display more than 1000 rows, you will visualized lib. Every js framework has a lib to do so. Basically, it will render the rows in the view port. The rows that not in the view port will not be rendered. They will only be rendered when user scrolls.

This is year 2021, chances you read this answer in the future, the browsers vendor might probably fix the performance of 1000 rows, they might even extend that limit. So try it out.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 WebDev-SysAdmin
Solution 3 angry kiwi

Related Questions