CSS定位多个表格

Question

我有一个问题，我的CSS引导。 我有一个网页与多个表，他们必须并排。 但我的CSS搞砸了一切：/

真正的问题是，我不能把不同的CSS属性在不同的表上。每个表格都具有相同的attributs（它印在一个循环中）

我的网页应该是这样的：

[表] [表] [表]

[表] [表] [表]

[表]

但它是这样：

[表] [表] [表]

............................ [表]

[表] [表] [表]

（被间隔 ''）

我的自举表attributs：

table { 
    background-color: #646569; 
    float: left; 
    color: #ffffff; 
    border-radius: 4px; 
} 

.table { 
    width: 30%; 
    max-width: 30%; 
    margin-bottom: 20px; 
} 

我的HTML表：

<table class='table table-bordered table-responsive sortable'> 

有人可以帮我或给我一个小费吗？ ty！ ^^

Answer 1

不浮动它们。改为使用display: inline-table;。

Answer 2

在你的HTML，如果你包装每个表中的自举列级应该解决您的问题，像这样：

<div class="col-md-4 col-xs-12"> 
    <table class='table table-bordered table-responsive sortable'> 
    </div> 
</div> 

如果你这样做，你可以删除表从float:left;和width: 30%;和max-width: 30%;你的.table类。

你的CSS会是这样，而不是：

table { 
    background-color: #646569; 
    color: #ffffff; 
    border-radius: 4px; 
} 

.table { 
    margin-bottom: 20px; 
}