Place tables one under another forming columns

Question

I'm trying to create different columns containing elements of different categories.

Demo online

I started working with lists, but I found out that tables seems to be best suited for this purpose and categories won't break into different columns.

The problem I'm encountering now is that if I have a table with only one or two rows, then there will be a huge whitespace under it because other table won't fill it.

Is there a possibility to fit those white spaces and place the tables one under another instead of on their right side?

I'm open to the use of external scripts or plugins to solve the issue.

Expected result

table {
    vertical-align:top
}
table {
    display:inline-block;
    width:25%
}

Note: I can not know forehand how many tables will I have or how many elements will bee in them, so this can not be done statically.

Answer 1

Using a library like http://masonry.desandro.com/ See http://jsfiddle.net/tnbqxqpg/1

var elem = document.querySelector('div');
var msnry = new Masonry(elem, {
  itemSelector: 'table',
  columnWidth: 200
});


<div>
  <table border="1">
   ...
  </table>
  <table border="1">
    ...
  </table>
  <table border="1">
    ...
  </table>
</div>

Answer 2

When you just delete the

display:inline-block;

then it will show all the tables one under another