7

<div>我有一个相对定位并具有定义尺寸的外部。在其中，我有一个<table>绝对定位的对象，带有top, left,right并bottom设置为零。我希望表格能够扩展以遵守顶部/左侧/右侧/底部约束，但是，这不是发生的情况。相反，表格尺寸是根据其内容计算的。

如果我使用 inner<div>而不是 a <table>，那么它会按预期工作。另一方面，如果我放在display: table;inner <div>，那么它的行为就像一张桌子。

我的问题是：为什么会这样？此行为在规范中的何处定义？或者它是浏览器中的错误（非常不可能）？

我检查了CSS 2.1 规范，阅读了第9.7 节“显示”、“位置”和“浮动”之间的关系、10.3.7 绝对定位、不可替换元素、17 个表格。我还检查了Mozilla Developer Network 中的 position CSS 属性。我也在 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;
}

显示了三个块，最上面是一个表格元素，中间是一个 div 元素，最下面是一个带有 display: table 的 div 元素。

4

2 回答 2

3

我相信答案在于 CSS2.1 规范，特别是第 17.5.2 节：表格宽度算法：'table-layout' 属性（强调我的）：

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

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

该部分的末尾还有这一行，尽管我猜它还没有发生：

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

于 2013-04-19T01:01:51.873 回答
0

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

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

于 2013-04-19T01:00:52.370 回答