TABLE 比包含 DIV 更宽答案

【问题标题】：TABLE wider than containing DIVTABLE 比包含 DIV 更宽
【发布时间】：2011-04-20 19:36:37
【问题描述】：

在下面的示例中，here 也可用，WebKit（Safari 5，Chrome 10.0.648.205）和 Mozilla（FF 4）都将 DIV div 保持在浏览器窗口的可见宽度附近，而 TABLE 与它的内容。

我希望 DIV 会像 TABLE 一样宽，但由于跨浏览器的行为是一致的，我怀疑这是一个特性而不是错误。

有趣的是，如果 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>

【问题讨论】：

你的问题回答了我的问题！浮动“增长”是我一直在寻找的。将 display 设置为 inline-block 也可以，这也是我最终决定的。

标签： html css

【解决方案1】：

块元素默认采用其父级的宽度，而不是其内容的宽度；另一方面，height 则相反：块元素默认采用其内容的高度，而不是其父级的高度。之所以如此，是因为 HTML/CSS 是围绕英文文本通常的从上到下的布局构建的。

所以，您的#container 采用<body> 的宽度，然后#container 内部的<table> 溢出#container。如果您将overflow: hidden 放在#container 上，您将在#container 上剪辑<table>、overflow-x: auto; 将添加一个滚动条。

更新：就浮动元素而言，CSS3 spec 有这样的说法：

'width'的使用值是计算值，除非是'auto'，当使用值是收缩到适合的宽度。

默认宽度是自动的，所以shrink-to-fit是：

shrink-to-fit宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地说：通过格式化内容而不换行来计算首选宽度，除非出现明确的换行符，还可以计算首选的最小宽度，例如，通过尝试所有可能的换行符。

您的<table> 中没有可能的换行符，因此浮动的#container 将占据其<table> 子元素的整个宽度。

【讨论】：

和float一样，像内联块和表格单元格一样，使用"shrink-to-fit"算法查看内容来计算容器的宽度
@Youval：看起来你在我更新之前达到了标准。我为后代添加了一些指向 CSS3 工作草案的链接。

【解决方案2】：

我一般设置div的大小，让table自己调整到div。不确定那一点洞察力是否会有所帮助。

【讨论】：