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

TABLE包含DIV

回答

相关问题