Search code examples
htmlcsstabularflextable

Draw table, and put div with specific class to new row

I have some rendered data, and I want to display it "in table". How can I implement this using CSS? (Maybe flex could help me)

<div class="test">1</div>
<div class="test">2</div>
<div class="newRow">3</div>
<div class="test">4</div>
<div class="newRow">5</div>
<div class="test">6</div>

Expected result, something like this:

1 3 5 

2 4 6

*

Divs are rendered by angular2 loop (ngFor). There may be 2 or more. I need more dynamic solutions which would be depends on "class="newRow"" - end of row.

Solution

  • Perhaps try this:

    <div>
<div class="test">1</div>
<div class="test">3</div>
<div class="test">5</div>
</div>
<div>
<div class="test">2</div>
<div class="test">4</div>
<div class="test">6</div>
</div>

    CSS:

    .test{
  display:inline;
}

    Fiddle here: https://jsfiddle.net/d0Ltnenp/2/