将表格一个放在另一个形成列

Question

我正在尝试创建包含不同类别元素的不同列。

我开始使用列表，但我发现 tables 似乎最适合这个目的，而且类别不会分成不同的列。

我现在遇到的问题是，如果我有一个只有一两行的table，那么它下面会有一个巨大的空白，因为其他table不会填充它。

是否有可能适合这些空白并将 table 一个放在另一个下面而不是放在右侧？

我愿意使用外部脚本或插件来解决问题。

预期结果

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

注：我不知道正手会有多少个table或者里面有多少个元素，所以这不能静态地完成。

Answer 1

当你刚刚删除

display:inline-block;

然后它会依次显示所有表格

Answer 2

使用类似 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>

将表格一个放在另一个形成列

Place tables one under another forming columns

html

css

jquery

css-tables

预期结果