在HTML中包含div的表溢出

我有一個溢出其包含div的表。我想顯示錶格中的所有內容，所以表格必須超過100％的寬度才能這樣做。問題是包含div不反映它的孩子的大小。我在這裏有一個例子，它是一個響應式頁面，但問題只發生在低寬度 - 高寬度時很好。在HTML中包含div的表溢出

<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 

body, table, td { 
    color  : #1D1F22; 
} 


#content { 
    padding: 10px; 
    /*overflow: hidden; */ 
    background-color:red; 
    } 

.border { 
    background-color: #4385DB; 
    color   : #4385DB; 
} 

table 
{ 
    word-break: break-all 
} 

@media(min-width: 800px) { 
    #content { 
     width  : 98%; 
    } 
} 

</style> 
</head> 
<body> 
<div id="content"> 
    <table cellpadding="7" cellspacing="1" class="border"> 
     <tr> 
      <td>VeryLongBitOfTextVeryLongBitOfText</td> 
      <td>VeryLongBitOfTextVeryLongBitOfText</td> 
      <td><img src="dogs.jpg" width="400" height="100" alt="trev"></td> 
      <td>VeryLongBitOfTextVeryLongBitOfText</td> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

JS提琴在這裏：http://jsfiddle.net/GrimRob/qg75arbs/

來源

2014-09-05 Rob Sedgwick

你爲什麼不考慮在內容中使用滾動'overflow：scroll;'？ – Ram 2014-09-05 08:49:40

爲什麼不嘗試設置圖像的寬度爲％，高度爲自動，最小寬度？ – 2014-09-05 08:52:57

如果您希望表格推出包含div，請將此添加到您的#content css中。

display: table-cell;

來源

2014-09-05 09:00:00 jcdang

非常感謝，瀏覽器支持似乎也沒關係 – 2014-09-05 09:14:35

<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 

body, table, td { 
    color  : #1D1F22; 
} 


#content { 
    padding: 10px; 
    /*overflow: hidden; */ 
    background-color:red; 
    } 

.border { 
    background-color: #4385DB; 
    color   : #4385DB; 
} 

table 
{ 
    word-break: break-all; 
    width:100%; 
} 

.img1 { 
    min-width:200px; 
    width:100%; 
    height:auto; 
} 

@media(min-width: 800px) { 
    #content { 
     width  : 98%; 
    } 
} 

</style> 
</head> 
<body> 
<div id="content"> 
    <table cellpadding="7" cellspacing="1" class="border"> 
     <tr> 
      <td>VeryLongBitOfTextVeryLongBitOfText</td> 
      <td>VeryLongBitOfTextVeryLongBitOfText</td> 
      <td><img src="dogs.jpg" class="img1" alt="trev"></td> 
      <td>VeryLongBitOfTextVeryLongBitOfText</td> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

來源

2014-09-05 08:54:29

我認爲這裏的問題是，該表將只縮小到儘可能小的內容（大部分時間），這種情況下，在你們會請注意，每列的尺寸都是最小的（1個字符寬度），並帶有靜態寬度圖像。

從本質上講，表格元素並沒有像你想要的那樣真正響應，並且在較小的尺寸下變得靜止。您可以縮放圖像或隱藏某一寬度以下的列，但如果使用表格元素，它總是會縮小到一定的大小。

來源

2014-09-05 08:55:40 Coops

您應該考慮在表格或單元格上使用table-layout: fixed和一些寬度。

相關CSS：

table { 
    table-layout: fixed; 
    min-width: 960px; 
}

table-layout: fixed是其他表格佈局算法，其中瀏覽器堅持什麼作者（你）要不要試圖再以尺寸適應的內容。如果你有一些寬度需要的跡象，那麼效果會很好，如：min-width：http://jsfiddle.net/qg75arbs/1/

在沒有table-layout: fixed的情況下，表格上的簡單最小寬度也有效，這取決於您的要求。

刪除table { word-break: break-all; }也行得通，似乎很奇怪，在試圖擁有大型單元格的時候允許這樣做。

來源

2014-09-05 09:02:33 FelipeAls

是的。打敗我吧。當你有很大的表格時，這也是一個非常關鍵的屬性。它會停止所有單元在整個列上比較彼此的寬度，以確定每個列的理想單元寬度策略。 – 2014-09-05 09:04:59

在HTML中包含div的表溢出

回答

相關問題