cssdisplay: table屬性：レイアウトの問題を解決するための強(qiáng)力なツール

コアポイント：

• CSSのtable屬性は強(qiáng)力であり、複數(shù)のレイアウトの問題を解決し、すべての最新のブラウザーと互換性があります。これにより、HTML要素はテーブル要素のように機(jī)能し、複雑なレイアウトとアライメントの問題に共通のソリューションを提供できます。
• csstableプロパティを使用して、輪郭ボックス、シンプルな古いスタイルのレイアウト、コンテンツオーケストレーションを備えた適応レイアウトを作成できます。応答性の高いデザインで特に役立ち、ユーザーの畫面サイズに応じて要素をサイズ変更し、位置付けます。
• csstable屬性には多くの利點(diǎn)がありますが、いくつかの制限もあります。他のディスプレイプロパティと比較して複雑なレイアウトの作成に柔軟性が低く、floatやpositionなどの特定のCSSプロパティではうまく機(jī)能しません。ただし、多くの場合、table屬性を使用することの利點(diǎn)は、その欠點(diǎn)を上回ります。

現(xiàn)在、FlexBoxはレイアウト構(gòu)築に人気のある新しいテクノロジーになる可能性があります。 Flexboxの利用可能なスペースに適応する驚くべき能力により、多くの人々がその可能性を楽しみにしています。ただし、すべてのレイアウトの問題を解決することはなく、古いブラウザとの互換性にはいくつかの問題があります。 FlexBoxには現(xiàn)在、一般的なポリフィル（古いブラウザ向けのフォールバックソリューション）はありません - 2009年バージョンのIE：Flexieのポリフィルのみを知っています。多くの場合、見過ごされがちなCSS tableを使用すると、ディスプレイプロパティがより簡単なソリューションを見つけることができることがわかりました。これらのCSSプロパティは、関連するすべてのブラウザーによって広くサポートされており（これはIE6とIE7を除外していることに注意してください）、いくつかの主要なレイアウトの難しさを優(yōu)雅に解決できます。

この手法に完全に精通していない場合は、divの

屬性を変更すると、display>>テーブルまたはテーブル要素のように動(dòng)作する可能性があります。 待って、テーブルを使用してレイアウトしますか？これは良くありませんか？

21世紀(jì)初頭の最もホットなWebデザインのトピックの1つは、HTMLテーブルコードをレイアウトツールとして使用することに関する議論でした。それはハックであり、それでも悪い習(xí)慣です。

代わりに、ここで完全に理にかなっているHTML（つまり、Div、セクション、ヘッダーなど）を使用して、CSSから有用なテーブル表現(xiàn)の知識(shí)を借りています。これはまさにCSSの設(shè)計(jì)されているため、ハックやパッチだとは思わないでください。そうではありません。

使用法

次の例では、上部のボタンをクリックすると、3つの色のdivの

屬性の屬性をdisplay: table-cellから

：

に変更できます。 display[Codepenサンプルリンク - 実際のCodepenリンクに置き換え]block table-cell

プロパティなしでDivが水平にどのように配置されているかを確認(rèn)できます。また、いくつかの典型的なテーブルルール（

など）にもアクセスすることもできます。

間隔が必要な場合は、古典的なCSS margin屬性はテーブルセルに影響を與えないことに注意してください。代わりに、border-spacingを使用します（コンテナテーブル要素に適用する必要があります）。これらのルールを使用したい場合は、Codepenにコメント行を見つけることができます。

この手法は、他の方法で解決するのが難しい多くの問題を解決するのに非常に役立ちます。

3つの簡単なケースを選択しました。table表示屬性は非常に価値があります。

しかし、最初にそれらを見てみましょう：

表示屬性 はとして表されます

テーブル、インラインテーブル

display 屬性	呈現(xiàn)為
table, inline-table	table
table-column	col
table-column-group	colgroup
table-row-group	tbody
table-header-group	thead
table-footer-group	tfoot
table-row	tr
table-cell	td
table-caption	caption

table-column col table-column-group colgroup Table-Row-Group tbody table-header-group thead table-footer-group tfoot Table-row tr table-cell td table-caption キャプション

フォームとCSSの真に包括的なガイドについては、CSSトリックをチェックしてください：[CSS Tricksのフォームガイドリンク - 実際のリンクに置き換え]

ケース1。輪郭ボックス

これは私が扱う最も一般的な問題の1つだと思います。コンテンツが不明なフローティングボックスがいくつかあり、それらをすべて同じ高さにする必要があります。

FlexBoxはこの問題を簡単に解決できることを知っていますが、テーブルルールもそれを行うことができます。

display: tabletable-row（またはdisplay: table-cell）プロパティをコンテナに、floatプロパティを內(nèi)部ボックスに適用するだけです。任意の屬性を削除する必要があることに注意してください（それ以外の場合は、table-cell屬性は有効になりません）。

html：

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

css：

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

[Codepenサンプルリンク - 実際のCodepenリンクに置き換え]

ケース2。シンプルな古いスタイルのレイアウト

これはかなり時(shí)代遅れの例ですが、最近やったように、あなたはそれに対処する必要があるかもしれません。

數(shù)ヶ月前、私は次のスキームに非常に似たグラフィックレイアウトを受け取りました。 IE8と互換性がある必要があり、これを行う最良の方法は、CSSテーブルルールを使用することであることがわかりました。

[Codepenサンプルリンク - 実際のCodepenリンクに置き換え]

ケース3。コンテンツオーケストレーション関數(shù)を使用した適応レイアウト

前の例では、新しいトピックにつながります。CSSテーブルルールを使用して適応レイアウトを構(gòu)築することは可能ですか？

これは可能であるだけでなく、コンテンツオーケストレーションタスクを?qū)g行することもできます。

2つのdivのプロパティを

からdisplayに変更して、配置を垂直から水平に変更する方法を見てきました。 block さらに、table-cell屬性を持つ要素は、テーブルレイアウトの上部に配置されます。繰り返しになりますが、

要素は下部に配置されます。これは、応答性のあるレイアウトを再フォーマットするときに予想外に役立ちます。

下のペンでは、ウィンドウがサイズ変更されたときにその位置をナビゲーション要素と交換するタイトル要素で、table-header-group屬性をtable-footer-groupに変更するだけです。

html：display table-header-group

css：

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

および

divにも同様の動(dòng)作があります。

#wrapper, header {
    display: block; /* 我們實(shí)際上不需要此規(guī)則，因?yàn)樗J(rèn)為此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

これはレイアウトプランです：左側(cè)のデフォルトのモバイルバージョン、右側(cè)のデスクトップバージョン：footer #banner2

これはランニングデモンストレーションです：

[Codepenサンプルリンク - 実際のCodepenリンクに置き換え]

この議論の詳細(xì)については、

css

を使用したスタッキング CSSレイアウトのアンチヒーロー - "

"
• display:table
結(jié)論
• display:tablecss
ディスプレイプロパティは、サイズとレイアウトの課題に対する過小評価された貴重なソリューションです。

私は個(gè)人的には複雑なレイアウトを構(gòu)築するためにそれらを使用することを選択しないかもしれませんが、彼らは確かにレイアウト部分に関連する多くの課題を解決します。

CSS

プロパティtableに関する

FAQ

（CSS屬性に関するよくある質(zhì)問をここに追加する必要があります。コンテンツは元のテキストに似ていますが、重複を避けるために文言を調(diào)整する必要があります。） table上記のすべてのCodePenリンクは、実際のCodePenリンクに置き換える必要があることに注意してください。 CodePenに直接アクセスして作成できません。

以上がレイアウトシークレット武器＃1：CSSテーブルプロパティの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。