CODEWITHSUNDEEP
jquerycsshtmlcss-tables
Alvaro
Alvaro

Reputation: 41605

Place tables one under another forming columns

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.

enter image description here

Expected result

enter image description here

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.

Upvotes: 0

Views: 47

Answers (2)

Ruan Mendes
Ruan Mendes

Reputation: 92294

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>

Upvotes: 1

user3106974
user3106974

Reputation: 110

When you just delete the 

display:inline-block;

then it will show all the tables one under another

Upvotes: 0

Related Questions