How to make a column display in the next row?

Question

I have more than five to six columns that will increase in the future. I have to display each row with three columns. So, how do I get the column to display in the next row? I set the parent class display: table and the child class display:table-cell , because I have to display the same column height.

I get a conclusion like this

I need a conclusion like this.

 .table { display: table; border-collapse: separate; border-spacing: 30px 0px; width: 100%; } .row { display:table-row;width: 100%; } li{ display:table-cell; padding:5px; background-color: gold; width: 33.33%; text-align: center; } 

 <div class="table"> <ul class="row"> <li>Cell 1</li> <li>Cell 2</li> <li>Cell 3</li> <li>Cell 4</li> <li>Cell 5</li> <li>Cell 6</li> </ul> </div> 

Answer 1

I also prefer this one. You can see here: JSFiddle

 * { box-sizing: border-box; } .table .row { display: flex; flex-wrap: wrap; list-style:none } .table .row li { background: orange; width: 33%; text-align: center; line-height: 100px; border: 5px solid white; } .table + .table li { background: olive; } 

 <div class="table"> <ul class="row"> <li>Cell 1</li> <li>Cell 2</li> <li>Cell 3</li> <li>Cell 4</li> <li>Cell 5</li> <li>Cell 6</li> </ul> </div> <div class="table"> <ul class="row"> <li>Cell 1</li> <li>Cell 2</li> <li>Cell 3</li> <li>Cell 4</li> </ul> </div> 

Answer 2

Unfortunately, you need to add a row wrapper around each set of columns without using another layout method (e.g. flexbox).

Since you already have the Flexbox answer (see @Shiva answer), here's a table with row wrappers and table-layout: fixed; . Note. I also changed your ul and li to a div to remove some automatic CSS that applies to list items.

 .table { display: table; border-collapse: separate; border-spacing: 30px 30px; width: 100%; table-layout: fixed; } .row { display:table-row;width: 100%; } .cell { display:table-cell; padding:5px; background-color: gold; width: 33.33%; text-align: center; } 

 <div class="table"> <div class="row"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> </div> <div class="row"> <div class="cell">Cell 4</div> <div class="cell">Cell 5</div> <div class="cell">Cell 6</div> </div> </div> 

Updated:

I still think you should consider a different layout method (e.g. flexbox), but if you want to use a CSS table layout with variable-width cells, you can actually use table instead of emulating one, and using the colspan attribute. Please note that this is a very old school and can hardly be considered useful for the actual layout. If you show tabular data, that’s fine, but if you post more complex content, look at the flash block (the answer is provided, which should work for you), or a CSS grid, or grids like Ungrid .

Regardless, here is the table:

 table { border-collapse: separate; border-spacing: 30px 30px; width: 100%; table-layout: fixed; } td { padding:5px; background-color: gold; text-align: center; } 

 <table> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td colspan="3">Cell 4</td> </tr> </tbody> </table> 

Answer 3

This can be easily achieved using the css grid. You can add as many elements as possible inside the wrapper wrapper. Moreover, he will respond.

 body{ margin:20px; } .wrapper{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:100px; grid-gap:5px; } .wrapper > div{ display:flex; justify-content:center; align-items:center; color:#fff; background:#FF8966; } 

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