bootstrap的溢出：隱藏在div中不起作用

如果表格的內容比我的允許的大小更長，其餘部分將被隱藏。出於某種原因，當我使用的引導，它不隱藏溢出bootstrap的溢出：隱藏在div中不起作用

我的HTML

<div id="wrapper"> 
     <table class="tabel_basisgegevens" border="5"> 
      <tr><td>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</td></tr> 
     </table> 
    </div>

我的CSS

.tabel_basisgegevens{ 
    height:30px; 
    width: 1170px; 
    color:white; 
    background:red; 

}  
#wrapper { 
    position:absolute; 
    border:1px; 
    border-color:blue; 
    width: 200px; 
    overflow: hidden; 
}

here is my JSFIDDLE

當你從「外部資源」刪除引導它工作正常。任何想法如何解決這個問題？在Chrome上運行良好，但在Firefox 22.0上無法運行。

和我的alert（）不提醒表格的寬度是1170，而是提醒div的寬度。

來源

2013-07-19 da-hype

它對我來說工作正常 –

@godfrzero抱歉，剛更新的問題。 –

試試css override overflow：hidden！important; – Arunu

問題的根源似乎是Firefox是忽略了在桌子上width: 1170px;和包裝使用width: 200px;。在表中添加一個min-width: 1170px;可以修復您的問題，但我無法確定如果沒有其他詳細信息，這是否可以接受。

編輯：其實，如果<td>內容總是被限制在一個單一的線，你可以使用white-space: nowrap爲<td>，它應該正常工作。在MBP上測試FF22。

編輯2：所以通過引導CSS文件中查找後，我注意到了這一點：

table { 
    background-color: transparent; 
    border-collapse: collapse; 
    border-spacing: 0; 
    max-width: 100%; 
}

由於引導設置表上的一個max-width: 100%，瀏覽器會忽略任何寬度設置，如果它比越大表格父元素的寬度。因此，刪除max-width，添加min-width或明確告訴瀏覽器您不想使用white-space: nowrap換行符都可以解決您的問題。如果你不需要它，我建議從Bootstrap中刪除max-width。

無論如何，這仍然存在Firefox和Chrome爲什麼在給定相同內容時表現不同的問題。在對此進行調查時，我看到了this SO question，這解釋了爲什麼Chrome瀏覽器忽略max-width。

從W3C Specification for Tables：

在可視化格式模型而言，一個表可以表現得像一個塊級（關於「顯示：表」）或內嵌級別（對於「顯示：inline-表'）元素。

檢出Chrome和FF的用戶代理樣式，它們都添加了display: table。所以嚴格遵循規範，overflow: hidden應該在兩個瀏覽器中失敗。看起來在這種情況下，Chrome會略微誤解規格，而FF則嚴格遵守它。

來源

2013-07-19 07:54:32 godfrzero

適用於最小寬度，但爲什麼最小寬度？我不明白。 –

我現在還沒有針對最小寬度工作的具體答案，但我會盡快進行一些挖掘並更新我的答案。獲得一些食物後：D – godfrzero

ahaha，不用擔心。再次感謝 –

試試這個

overflow:hidden working

http://jsfiddle.net/RZQwb/9/

#wrapper {position:absolute; 
      border:1px solid blue; 
      width:200px; 
      overflow:hidden; 
    }

來源

2013-07-19 07:41:14 falguni

不行，仍然不工作在Firefox 22.0和我的alert（）不提醒表的寬度http://jsfiddle.net/ RZQwb/12/ –

我有火狐22.0和它的工作正常 – falguni

不知道這是否作出差異，但即時通訊使用Firefox上的Mac？ –

bootstrap的溢出：隱藏在div中不起作用

回答

相關問題