DavidW DavidW - 3 months ago 8
CSS Question

Is it possible to create a html table that flows column or row and wraps accordingly purely in CSS?

I'm wondering if the following is possible without Javascript.
Let's say I have the following table (which wraps items to the next line going left to the right).

01 02 03 04
05 06 07 08
09 10 11 12


And I want to be able to toggle to column (going from up to down then wrap to the next column)

01 05 09
02 06 10
03 07 11
04 08 12


Ideally I'd want to be able to specify in a declarative manner like where I can specify the number of elements where it should wrap like (row-4 or column-4)

<div class="myContainer column-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
...
</div>


and if I want to switch (I'd simply update the css)

<div class="myContainer row-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
...
</div>


I've tried playing around with flex box because it has flex direction but I can't seem to wrap consistently based on whatever the elements are.

Answer

You could alternate between float and css columns. I've made a JS Fiddle to demonstrate:

https://jsfiddle.net/p46vghrg/

Comments