web-dev-qa-db-ja.com

table-rowなしでdisplay：table-cellを使用する

最近、display: table-cell;を使用する要素で囲まずに、要素でdisplay: table-row;を使用できることに気付きました。

例（IE、Chrome、FF、Safari、Operaで動作）：

<div style="display: table;">
    <div style="display: table-cell;">
        Text
    </div>
</div>

これは悪いスタイルと見なされますか？テーブルセルをテーブル行で囲む必要がありますか、それとも必要ありませんか？

htmlcss-tablestablerowtablecell
32
squarebracket

いいえ。display: table-rowと一緒に使用する必要はありません。読む ここ 。

table-cellは単に<td>または<th>を表します：

要素がテーブルセルを表すことを指定します。

特にtable-cellに関して：

たとえば、「display：table-cell」に設定された画像は使用可能なセルスペースを埋め、そのサイズは通常のセルと同様にテーブルサイズ設定アルゴリズムに寄与する可能性があります。

16
doitlikejustin

From CSSについて知っていることはすべて間違っています ：

匿名のテーブル要素

CSSテーブルは、テーブルレイアウトの通常のルールを順守します。これにより、CSSテーブルレイアウトの非常に強力な機能が有効になります。欠落しているテーブル要素は、ブラウザによって匿名で作成されます。 CSS2.1仕様には次のように記載されています。

HTML以外のドキュメント言語には、CSS2.1テーブルモデルのすべての要素が含まれているとは限りません。このような場合、テーブルモデルが機能するためには、「欠落している」要素を想定する必要があります。すべてのテーブル要素は、「table」/「inline-table」要素、「table-row」要素、および「table-cell」要素に対応する少なくとも3つのネストされたオブジェクトで構成される、必要な匿名テーブルオブジェクトを自動的に生成します。 。

つまり、最初にdisplay: table-cell;に設定されたブロックにセルを含めずにdisplay: table-row;を使用すると、行が暗黙的に示されます。ブラウザーは、宣言された行が実際に存在するかのように動作します。

いいえ、display:table-cellを含めずにdisplay:table-rowを使用しても問題はありません。それが生成するCSSは完全に有効であり、いくつかの非常に興味深いユースケースがあります。匿名テーブル要素の使用の詳細については、引用元の記事を参照してください。

注意 ：

有効なCSSを生成するという事実は、display:table-cellまたはdisplay:table-rowなしのdisplay:table-rowの動作が安定していることを意味するものではありません。今日（2016年2月）でも、匿名のテーブル要素の動作はブラウザー間で一貫性がありません。詳細については、 display：tableとdisplay：table-cell の動作の不整合を参照してください。

12
John Slegers