为什么绝对定位的表格不会根据它们的上/左/右/下值来计算宽度/高度？

Question

我有一个外部<div>相对定位且具有定义的大小。在其中，我有一个绝对定位的<table>对象，top，left，right和bottom设置为零。我希望表扩展到服从top / left / right / bottom约束，但是，这不是发生的事情。相反，表格尺寸是根据其内容计算的。

如果我使用内部<div>而不是<table>，那么它就像我预期的那样工作。另一方面，如果我将display: table;放在内部<div>，那么它的行为与表格完全相同。

我的问题是：为什么会发生？规范中定义了哪种行为？或者它是浏览器中的错误（非常不可能）？

我已查看CSS 2.1 specification，我已阅读9.7 Relationships between 'display', 'position', and 'float'，10.3.7 Absolutely positioned, non-replaced elements，17 Tables部分。我还检查了position CSS attribute in Mozilla Developer Network。我也在StackOverflow中搜索过。而且，我仍然找不到表格为什么会这样做的解释。

观看直播演示：http://jsfiddle.net/LgCDE/2/ 我可以在Chrome 27和Firefox 20.0上重现结果。

HTML：

<div class="box">
    <table class="table">
        <tr>
            <td>Hey!</td>
        </tr>
    </table>
</div>
<div class="box">
    <div class="table">Hey!</div>
</div>
<div class="box">
    <div class="table" style="display: table;">Hey!</div>
</div>

CSS：

div.box {
    position:relative;
    border: 2px dashed red;
    background: #800;
    width: 100px;
    height: 50px;
}

.table {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 3px double blue;
    background: #CCF;
    table-layout: fixed;
    border-collapse: collapse;
}

Answer 1

我相信，答案在于CSS2.1规范，特别是Section 17.5.2: Table width algorithms: the 'table-layout' property（强调我的）：

  

请注意，本节将覆盖适用于计算宽度的规则，如第10.3节所述。特别是，如果表格的边距设置为“0”，宽度设置为“自动”，则表格不会自动调整大小以填充其包含的块。但是，一旦找到表格的“宽度”的计算值（使用下面给出的算法，或者在适当的情况下，使用其他一些UA依赖算法​​），那么第10.3节的其他部分确实适用。因此，例如，可以使用左右“自动”边距对表格进行居中。

如您所述，width设置为auto时，宽度将基于内容而非包含块。

在该部分的末尾还有这一行，虽然我猜它还没有发生：

  

CSS的未来更新可能会引入使表格自动适合其包含块的方法。

Answer 2

我找不到任何技术原因，但我认为当你考虑一张桌子应该是什么时，这是有道理的。 div的默认显示是block，即一大块内容。因此，默认宽度为100％。表格只会扩展到您的内容。

在您的示例中，如果将.table设置为宽度为100％，则其行为将相同。