TABLE包含DIV

在下面的示例中，也可用here，WebKit（Safari 5，Chrome 10.0.648.205）和Mozilla（FF 4）都將DIV div保留在瀏覽器窗口的可見寬度周圍，而TABLE與其內容一樣寬。TABLE包含DIV

我期望DIV的增長和TABLE一樣寬，但由於行爲在瀏覽器中是一致的，我懷疑這是一個功能而不是bug。

有趣的是，如果DIV設置爲float：left，it does grow as wide as the table。

任何解釋？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title>Wide Table</title> 
<style> 

#container { 
    background-color:blue; 
/* float:left;*/ 
} 

</style> 
</head> 
<body> 
    <div id="container"> 
    <table > 
     <tr id="tr"> 
     <td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

來源

2011-04-20 Youval Bronicki

您的問題回答了我的問題！浮動「增長」是我一直在尋找的。將顯示設置爲內嵌塊也行得通，這也是我最終解決的問題。 – Chris 2012-06-21 20:44:58

塊元素默認採用其父元素的寬度，而不是其內容的寬度;另一方面，高度另一方面：塊元素默認情況下取其內容的高度，而不是其父母的高度。事情以這種方式工作，因爲HTML/CSS是圍繞通常的英文文本的頂部到底部佈局構建的。

所以，你需要#container的<body>寬度，然後<table>內#container溢出外#container。如果你把overflow: hidden放在#container上你會剪下<table>,overflow-x: auto;,#container會添加一個滾動條。

UPDATE：據浮動元素而言，CSS3 spec已經這樣說的：

的「寬度」所使用的值是所計算的值，除非使用時爲「自動」，值是縮小到適合的寬度。

默認寬度將被自動所以shrink-to-fit它是：

的收縮以配合寬度計算類似於使用自動錶格佈局算法計算一個表格單元格的寬度。粗略地說：通過格式化內容來設置首選寬度，而不是除了顯式換行符之外的地方斷開行，並且還可以通過嘗試所有可能的換行符來計算首選最小寬度。

，我們在您<table>沒有可能換行符所以浮動#container將其<table>孩子的整個寬度。

來源

2011-04-20 19:53:57

浮點數與內嵌塊和表格單元格一樣，使用[「縮小擬合」]（http://www.w3.org/TR/CSS21/visudet.html#float-width）算法，該算法查看內容來計算容器的寬度 – 2011-04-20 20:16:49

@Youval：看起來你在更新之前已經達到了標準。我爲後人添加了一些CSS3工作草案的鏈接。 – 2011-04-20 20:18:22

-3

我通常會設置div的大小，並讓表格自己調整爲div。不確定這些洞察力是否會有所幫助。

來源

2011-04-20 19:42:57 Brett

回答

相關問題