レイアウトシークレット武器＃1：CSSテーブルプロパティ

cssdisplay: table属性：レイアウトの問題を解決するための強力なツール

コアポイント：

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

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

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

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

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

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

使用法

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

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

：

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

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

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

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

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

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

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

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

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

display 属性	呈现为
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プロパティを内部ボックスに適用するだけです。任意の属性を削除する必要があることに注意してください（それ以外の場合は、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。シンプルな古いスタイルのレイアウト

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

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

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

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

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

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

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にも同様の動作があります。

#wrapper, header {
    display: block; /* 我们实际上不需要此规则，因为它默认为此值 */
}

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

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

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

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

この議論の詳細については、

css

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

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

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

CSS

プロパティtableに関する

FAQ

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

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