不可能計算我的響應表的寬度Boostrap

Question

我試圖讓我的責任表。 http://codepen.io/Luiggi/pen/fLejw 在這裏你有一些圖片來向你展示我的問題和我的佈局。

第一個佈局 二佈局 第三輪廓

50％和33％的表永遠達不到最右邊。

有人知道如何計算正確的寬度？我錯在哪裏？

我希望有人能幫助我。

Answer 1

你想要的東西，像Demo

table.tablas50 { 
    width:49.86%; 
    float:left; 
} 
table.tablas50.mright { 
    margin-right:5px; 
} 
table.tablas33 { 
    width:33.15%; 
    float:left; 
} 
table.tablas33.mright { 
    margin-right:5px; 
} 

將其更改爲（在所有的地方）

table.tablas50 { 
    width:50%; 
    float:left; 
} 
table.tablas50.mright { 
    margin-right:0px; 
} 
table.tablas33 { 
    width:33.33%; 
    float:left; 
} 
table.tablas33.mright { 
    margin-right:0px; 
} 

Answer 2

這裏是你的代碼的另一個版本：http://codepen.io/Nico_O/pen/nIqwE

你的問題是，喲你使用表格進行佈局。如果您將一個元素用作包裝，則可以使用33.333％的邏輯寬度作爲列的三分之一。 Normaly你會想要做這樣的事情：

.row 
{ 
    margin-left: -5px; 
    margin-right: -5px; 
} 

.column 
{ 
    float: left; 
    padding-left: 2.5px; 
    padding-right: 2.5px; 
} 

.column.three 
{ 
    width: 33.333% 
} 

現在你可以做這樣的事情：

<div class="row"> 
    <div class="column three"> 
     Content 
    </div> 
    <div class="column three"> 
     Content 
    </div> 
    <div class="column three"> 
     Content 
    </div> 
</div> 

漂亮的結果。由於你的表是你的列，所以你不能像這樣使用填充。對於這種情況，我這樣做：

.table.tablas50 
{ 
    width:calc(50% - 5px); 
} 

有了這個計算你擺脫左緣，右爲第一個和最後一個元素。

我刪除了媒體查詢，您將不得不將這些代碼添加到它們中。