web-dev-qa-db-ja.com

ディスプレイの使用方法（および理由）：テーブルセル（CSS）

私はveryのアクティブな背景を持つサイトを持っています（ここではアニメーションで6個ほどの異なるz-indexを使用しています2）。私は、コンテンツを持っているフォアグラウンドにあるが、その中のバックグラウンドまで「ウィンドウ」を望んでいました。私が持っていたいくつかの問題：

  1. バックグラウンドで「穴を開ける」ことはできないので...

    • 含むdivを作成し、「srminfo」と呼びます
    • その中には「上」、「左」、「窓」、「右」、「下」がありました
    • 上、左、右、下はすべて不透明な白い背景でした
    • 一方、srminfoおよびウィンドウdivにはbackground：noneがありました。

  2. どんなに頑張っても、「正しい」divは「トップ」と「ボトム」divの間のスペースを埋めることはできませんでしたが、さまざまなことを試しました。動的である必要があった理由は、「左」のdivのテキストがJavaScriptを使用してランダムに生成された背景色に基づいて動的だったためです。

表示方法：テーブル;そして、テーブルのような他のすべての関連するCSSコード？そして、どのように使用できますか？

htmlcsscss-tables
16
Jim

答えを見つけようとして数日後、私はついに見つけました

ディスプレイ：テーブル;

"How"：のように、実際に動作させる方法について、オンラインで入手できる情報は驚くほどほとんどありませんでした。

この素晴らしいコードを使用するには、HTMLを構造化する唯一の実際の方法、つまり構文がテーブルであったときを思い出す必要があります。 2行3列のテーブルを取得するには、次のことを行う必要があります。

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

同様に、CSSでそれを行うには、次を使用します。

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

以下のJSFiddleの例でわかるように、3列目のdivにはコンテンツがありませんが、最初の2列のテキストで設定された自動高さを尊重しています。勝つ！

http://jsfiddle.net/blyzz/1djs97yv/1/

display: table;はIE6または7では機能しません（ありがとう、FelipeAls）。したがって、ブラウザの互換性に関するニーズに応じて、これはあなたが探している答えではないかもしれません。

40
Jim

親>子セレクターの関係を使用する方が簡単なので、内部divでcssクラスを明示的に定義する必要はありません。

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}
<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>
19
Dmitriy Sintsov

CSSプロパティのdisplay:tableファミリはほとんどがそこにあるため、HTMLテーブルはそれらの観点から定義できます。特定のタグ構造に非常に密接にリンクされているため、それ以上の用途はほとんどありません。

これらのプロパティをページで使用する場合、実際にタグの<table>ファミリーを使用していない場合でも、テーブルの構造を厳密に模倣したタグ構造が必要になります。最小バージョンは、単一のコンテナ要素（display:table）であり、すべてが行（display:table-row）として表現できる直接の子を持ち、それ自体がすべてセル（display:table-cell）。 tableファミリーの他のタグを模倣できるプロパティは他にもありますが、HTMLに類似した構造が必要です。これがなければ、これらのプロパティをうまく利用することは（不可能ではないにしても）非常に困難になります。

3
The Spooniest

ディスプレイの使用方法（および理由）：テーブルセル（CSS）

私は、他の答えが直接行ったとは思わないので、言及したかったのです。「なぜ」に対する答えは次のとおりです。正当な理由はなく、おそらくこれを絶対にしないでください。

ウェブ開発の10年以上の経験の中で、_<div>s displayスタイルでは、テーブル要素のみを使用します。

私が思いつく唯一の仮説は、表形式のデータが何らかの非HTMLテーブル形式（CSVファイルなど）で保存されている場合です。この場合の非常に具体的なバージョンでは、mightを追加する方が簡単です<div>すべてをタグ付けしてから、実際のテーブルタグを追加する代わりに、子孫ベースのスタイルを追加します。

しかし、それは非常に不自然な例であり、すべての実際の場合、単純にテーブルタグを使用する方が良いことを知っています。

2
machineghost