css - 为什么绝对定位的表格不根据其顶部/左侧/右侧/底部值计算宽度/高度？

Question

我有一个外层 <div>相对定位并具有定义的大小。在里面，我有一个 <table>绝对定位并带有 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 (强调我的):

Note that this section overrides the rules that apply to calculating widths as described in section 10.3. In particular, if the margins of a table are set to '0' and the width to 'auto', the table will not automatically size to fill its containing block. However, once the calculated value of 'width' for the table is found (using the algorithms given below or, when appropriate, some other UA dependent algorithm) then the other parts of section 10.3 do apply. Therefore a table can be centered using left and right 'auto' margins, for instance.

如您所述，将 width 设置为 auto，宽度将基于内容，而不是包含 block 。

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

Future updates of CSS may introduce ways of making tables automatically fit their containing blocks.