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; 
}