table-cellのwidth%指定が分かりません

Question

display:tabel-cellの挙動が理解できません
display:tabel-cellの場合にはwidthを%指定すると%の増加に伴い、widthは減少してしまいます。
この場合、pタグの親要素はdivなのでそのwidthの300pxが%の基準になると考えていたのですが、
どうも異なります。原因が分かりませんので、どなたかわかる方教えていただけないでしょうか

<div>
	<p></p>
</div>

div {
    border: 2px solid black;
    height: 50px;
    width: 300px;
}

p {
    width: 10%;
    border: 2px solid red;
    height: 30px;
    display: table-cell;
}

width:10%のとき

width:1%のとき

Answer 1

UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.

（略）
The remainder of this section is non-normative.
Tables

とのこと。
英語は苦手なんですが、「ユーザーエージェントは'table-layout' が 'auto' の時に、このアルゴリズムの実装を要求されていない。ユーザーエージェントは、異なる動作をするその他のアルゴリズムを採用することができる」「これ以降のセクションは標準化されていないものである」と読みました。
つまり、「テーブルセルの幅を決定する標準アルゴリズムは存在しない」ということなのでは。

Comments

[pythago]

ありがとうございます。
サポートされていないんですね

Answer 2

CSSのtable関連プロパティの特性はあくまでtableタグと一緒なのでtable->tr->tdといったようなtableを使うときと同じ形にしてあげないと％指定だとうまくいかないです。
そもそもtdは親要素の幅いっぱいに広がるので幅を指定したい場合はtable-cell単独でなおかつpx単位で指定するしかないんじゃないでしょうか

Comments

[pythago]

そのように解決すれば良いのですね
では上手くいかない理由は分かりますでしょうか？
そこがはっきりしないことには今後使いづらいと思いまして・・・