web-dev-qa-db-ja.com

表示について:テーブルセル;機能している

私は特定の問題を解決しようとはしていませんが、この問題の原因を理解しようとしています

一部のdivのwidthheightdisplayを設定しましたが、高さ/幅の設定が反映されていません。テキストも下に押されています。

http://jsfiddle.net/k7esv/

1)heightがtable-rowに設定されているときにテキストを下にプッシュしてから、heightが削除されたときにテキストを上に配置するのはなぜですか?

2)幅/高さの設定が適用されないのはなぜですか?

3)marginプロパティの設定がそれらに影響を与えないのはなぜですか?

http://jsfiddle.net/k7esv/1/

22
Shawn Taylor

1)これはFirefoxに固有のレンダリングの問題のようです。 divにvertical-alignプロパティを設定すると修正されます。 topmiddle、またはbottomはすべて機能しているようです。 heightがあるのにvertical-alignが設定されていない場合にFFが何をしているのか、私には理解できません。バグかもしれません。

2)幅と高さは尊重されますが、それらはテーブルのサイズ変更規則に従います。各セルに指定した幅を与えるのに十分なスペースがテーブルにない場合、より多くのコンテンツを持つセルにより多くのスペースが与えられます。これはあなたの例で起こっていたものです。以下の私の例を見ると、親要素が表のセルの幅の合計よりも広い場合、セルは幅を尊重していることがわかります。高さは常に機能するはずです(上記のFFレンダリングの問題の場合を除く)。

3)表のセルにマージンはありません。親divでborder-spacingおよびdisplay:tableを使用します。

http://jsfiddle.net/chad/k7esv/3/

14
Chad von Nau

同じ行のすべてのセルがその行の最も高いセルと同じ高さになるので、テーブル行の個々のテーブルセルに高さを設定しても無意味になる可能性があることを追加します(見逃されているようです)。 。

とは言っても、動的コンテンツが異なるセルに提供されるとき、つまり高さが変動するときに高さを追加したい場合があります。特定のセルを高さX未満に設定したくない場合があります。これは、別の特定のセルのコンテンツが少ない場合にのみ有効になります。

4
mr_reamer