CODEWITHSUNDEEP
htmlcss
Luiz Henrique
Luiz Henrique

Reputation: 61

How to create multiple columns in a page that continues the previus colum content. - HTML, CSS

First, sorry for any grammatical mistakes, I'm not an expert in English.

So, what I need is to separate my page in three colums that suport one table, when this table reachs to a, for example, height: 1000px in a colum it will go to the other colum.

I tried to do an quick example in Paint:

enter image description here

Everything that I tried just separate the page in three columns but they don't interact with each other as I want. There's any way to do that?

P.S: This table is created from my database, so it's not a fixed table.

Upvotes: 2

Views: 405

Answers (2)

worc
worc

Reputation: 3786

I feel at some point when it's a standard, this would be a decent use-case for CSS Grid Layout, or at least it might be more semantic that way. But for now you can definitely apply flexbox styling to a <table>:

table {
  /* forces the table to be full width 
     even without enough content */
  display: block;
}

tbody {
  border: 1px solid black;

  /* display flex will reflow child elements 
     once they hit a limit in their parent */
  display: flex;

  /* flex-flow sets the direction to flow child elements, 
     and if they should wrap when hitting 
     the end of their parent */
  flex-flow: column wrap;

  max-height: 80px;
  width: 100%;
}

tr {
  border: 1px solid #bad;

  /* the 33% (the flex basis) is how i'm 
     getting 3 columns, adjusting this will adjust 
     your number of columns, it's not the most general solution, 
     but it'll work for you case */
  flex: 0 0 33%;
}

td {
  border: 1px solid #ace;
}
<table>
  <tbody>
    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>

    <tr>
      <td>row data</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Kushtrim
Kushtrim

Reputation: 1949

I think it is possible with flexbox. You set a height for the parent element and add flex-direction: column and flex-direction: wrap

<div class="wrapper">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>


.wrapper {
    height: 100vh;
    width: 450px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.wrapper .element {
    background: red;
    margin: 10px;
    height: 45vh;
    width: 100px;
}

http://jsfiddle.net/fyj1htwk/

Upvotes: 0

Related Questions