7

<div>私は比較的位置が決まっていて、サイズが定義されているアウターを持っています。その中に、<table>絶対配置されtop、 、left、rightおよびbottomがゼロに設定されたオブジェクトがあります。上/左/右/下の制約に従うようにテーブルが拡張されることを期待していましたが、これは起こりません。代わりに、テーブルのディメンションはその内容に基づいて計算されます。

<div>の代わりにインナーを使用する<table>と、期待どおりに機能します。一方、display: table;内側に置くと<div>、テーブルとまったく同じように動作します。

私の質問は：なぜそれが起こるのですか？この動作は仕様のどこで定義されていますか? それともブラウザのバグですか（ほとんどありません）？

CSS 2.1 仕様を確認しました。セクション9.7 Relationships between 'display', 'position', and 'float' , 10.3.7 Absolutely positioned, non-replaced elements , 17 Tablesを読みました。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;
}

3 つのブロックが表示されます。一番上のブロックは table 要素、真ん中のブロックは div 要素、一番下のブロックは display: table を持つ div 要素です。

4

2 に答える 2

3

答えは、CSS2.1 仕様、具体的にはセクション 17.5.2: テーブル幅アルゴリズム: 'table-layout' プロパティ(強調鉱山) にあると思います:

このセクションは、セクション 10.3 で説明されている幅の計算に適用される規則よりも優先されることに注意してください。特に、テーブルの余白が '0' に設定され、幅が 'auto' に設定されている場合、テーブルはそれを含むブロックを埋めるために自動的にサイズ変更されません。ただし、テーブルの「幅」の計算値が見つかると (以下に示すアルゴリズム、または適切な場合は他の UA 依存アルゴリズムを使用して)、セクション 10.3 の他の部分が適用されます。したがって、たとえば、左右の「自動」マージンを使用してテーブルを中央に配置できます。

ご指摘のとおり、widthset to を使用するautoと、幅は含まれているブロックではなく、内容に基づいて決まります。

そのセクションの最後に次の行もありますが、まだ発生していないと思います。

CSS の将来の更新では、テーブルを自動的に含まれるブロックに合わせる方法が導入される可能性があります。

于 2013-04-19T01:01:51.873 に答える
0

技術的な理由は見つけられませんでしたが、テーブルとは何かを考えると理にかなっていると思います。div のデフォルトの表示は、コンテンツのチャンクであるブロックです。したがって、デフォルトでは幅が 100% になります。テーブルはコンテンツに展開されるだけです。

あなたの例では、.table の幅を 100% に設定すると、同じように動作します。

于 2013-04-19T01:00:52.370 に答える