2015-01-12 66 views
0

這可能很難解釋。自舉網格內的表格超出網格

見plunker:http://plnkr.co/edit/kSMeYCHjVuXyvy9Uvkdg?p=preview

這是在嘲弄我的工作的應用程序。

col-xs-2,我有一個側面板/菜單。 在col-xs-10,我有一個表格顯示用戶的數據。 (順便說一句,這個詞Honorificabilitudinitatibus是一些長字,我從維基百科了。

的問題是,因爲我的表中有太多的內容或單詞太長,表中延伸出row格,這是我強調與

紅色邊框。我想一切是紅色的邊框(或紅色邊框成長爲表變大)。我如何在引導做內?

感謝

+0

從自舉的網站(http://getbootstrap.com/css/#tables-responsive):「創建響應通過在'.table-responsive'中包裝任何'.table'使它們在小設備上水平滾動(在768px以下)。當查看大於768px寬的任何東西時,在這些表中看不到任何區別。「 **編輯:**主要問題是表格對較小的屏幕尺寸/寬度沒有反應。我不確定桌子會做你所需要的。你能重構使用display:table嗎? –

回答

2

正如@Joseph Marikle所建議的那樣,您應該查看隨附的響應式表格功能引導。他們最有可能解決了很多與此相關的問題。

但是,您可以使用CSS屬性table-layout以及100%寬度來實現此目的。

table { 
    width: 100%; 
    table-layout: fixed; 
} 
+0

表響應的問題在於它在最底部呈現滾動條,使應用程序不便於用戶使用。理想情況下,我希望整個頁面滾動,而不僅僅是col-xs-10 div。 – Rhs

0

的引導row是爲了放置在container裏面,因爲它包含這些導致你的表延伸超過切緣陰性的結果。

所以你應該把row格在.container-fluid ...

http://bootply.com/PTS4QZHgl8

+0

我認爲這是不對的。如果您將邊框放在col-xs-10上,並縮小屏幕,您會看到表格的延伸通過了該行。看到叉:http://www.bootply.com/ObiTuv0gH4 – Rhs

+0

是的..這就是爲什麼你應該把它放在一個'表響應'div – ZimSystem